Error calling a function in jQuery

Question

Error calling a function in jQuery

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

Hello friends, I have the following code: my error is as follows:

I'm doing a small application in which when you click "give me click" change color that works well because I select it with Jquery but when I want to add that part of the code to a function to be called through an onclick does not work, the other part of the code that resets the code to the original color does not work if I add it to a function

What do you think?

My Current Code:

$(document).ready(function () {
    function resetar() {
        $("#click").on('click', function () {
            $("#texto").css("color", "blue");
        });
    }
    
    resetar();

    //Resetear el color al original
    function resetar() {
        $("#click").on('click', function () {
            $("#texto").css("color", "black");
        });
    }
    
    resetar();
});

.clase1 {
    color:red;
}
.clase2 {
    color:blue;
}

<!DOCTYPE html>
<html>
<head>
    <title>App JQuery</title>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
</head>
<body>
    <h1>Introduccion a Jquery</h1>

    <p>Hi i'm Sommer0123</p>
    <p>Hi i'm Sommer0123</p>
    <p>Hi i'm Sommer0123</p>
    <p>Hi i'm Sommer0123</p>

    <p id="texto">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <button id="click">Dame click</button>
    <button onclick="resetar()">Restaurar todo</button>
    <script src="js/main.js"></script>
</body>

</html>

jquery

asked by simon 02.06.2017 в 19:14

source

3 answers

1

If you're using onclick you should not put $ (# click) .on ("click") only what you want to change when you click the button, like this:

function resetar(){
   $("#texto").css("color","blue");
}

answered by 02.06.2017 в 19:20

0

This is your code:

$(document).ready(function(){
       function resetar(){
           $("#click").on('click',function(){
               $("#texto").css("color","blue");
           });
       }
   resetar();

   //Resetear el color al original

    function resetar(){
        $("#click").on('click',function(){
            $("#texto").css("color","black");
        });
    }
    resetar();
});

The button that theoretically resets colors is calling a function that is called just like another function. Try to put different names

If you already use on ('click') you do not have to put it inside a function since that is already a function that will execute the code inside you when performing an action

Inside the script you call the reset () function twice and it will give you problems since there are 2 that are called the same and on the other hand it does not make sense to call them there.

I would have to stay something like this:

$(document).ready(function(){

      $("#click").on('click',function(){ 
          $("#texto").css("color","blue");
      });    

      $("#btn-reset").on('click',function(){
          $("#texto").css("color","black");
      });
});

<button  id="click">Dame click</button>
<button id="reset">Restaurar todo</button>

Or this:

$(document).ready(function(){

      function colorAzul(){
          $("#texto").css("color","blue");
      }

       function colorNegro(){
          $("#texto").css("color","black");
      }
});

<button  onclick="colorAzul()">Dame click</button>
<button  onclick="colorNegro()">Restaurar todo</button>

answered by 02.06.2017 в 19:36

problem with my browser mozilla firefox, I can not take "time" or "date", implement javascript to correct this problem Page and order full list in angular

score 0 · Accepted Answer

You are mixing the concepts a bit. First, functions are defined only once. Second, the onclick should not go within a function (unless there is a specific reason for it). Third, be careful to define a function and calling it immediately can cause unexpected things.

What you have to do first is to define what you want the buttons to do:

<script>
$("#click").on('click', colorRojo);
$("#reset").on('click', colorAzul);

function colorRojo() {
  $("#texto").css("color","red");
}
function colorAzul() {
  $("#texto").css("color","blue");
}
</script>

html:

<button id="click">Dame click</button>
<button id="reset">Restaurar todo</button>
<button onclick="colorAzul()">Restaurar todo2</button>

And of course you have several ways to write the functions

<button onclick="$('#texto').css('color','blue')">Restaurar todo3</button>

or in the js

$("#click").on('click', function(){$('#texto').css('color','red')});
$("#reset").on('click', function(){$('#texto').css('color','blue')});

etc