CODEWITHSUNDEEP
javascripthtmlbuttononclick
user1134746
user1134746

Reputation: 71

javascript button onclick doesn't fire

So i have done this simple task but i don't see why this is not working? Can same one see it and tell me? I see that the problem is that button does not call out the function but why ? 

<html>
<head>
    <title>Task count</title>
    <script>
        var over21 = 6.19;
        var under21 = 5.19;

        // Getting data from a user connecting variables with textboxes by ID
        var age = document.getElementById('age');
        var hours = document.getElementById('hours');

        // function wich does all of the calculation
        function magic(){    
            //cheking if he is under or over 21 
            if(age < 21){
                alert("You will make " + (age*under21));
            }else{
                alert("You will make " + (age*over21));                            
            };
        };

        // function that does everything and is connected to the button
        function myFunction(){
            // Validation checking that entered number is not more than 150 
            // And also if age is correct
            if((hours < 150 && hours > 0) && (age < 150 && age > 12)){
                magic();
            }else{
                alert("Wrong!");
            };
        };
  </script>
</head>
<body>
    <label>Enter your age.(12-150)</label>
    <input type="text" class="textBox" id="age"><br>
    <label>Enter how long will you work.(1-150)</label>
    <input type="text" class="textBox" id="hours"><br>
    <button onclick="myFunction()" >How much will i make ?</button>
</body>
</html>​

Upvotes: 1

Views: 3204

Answers (5)

Nathan Wheeler
Nathan Wheeler

Reputation: 5932

Your code that sets your age and hours variables is only run once, thus they are the empty/default values for those text boxes. You should declare them outside the scope of a function, but then re-set them inside the "myFunction" function. Alternatively, you could only declare/set them in the "myFunction" function, then pass them to the "magic" function as parameters. In the end, your script should look something like this though:

<html>
<head>
    <title>Task count</title>
    <script>
        var over21 = 6.19;
        var under21 = 5.19;

        // function wich does all of the calculation
        function magic(age, hours){    
            //cheking if he is under or over 21 
            if(age < 21){
                alert("You will make " + (age*under21));
            }else{
                alert("You will make " + (age*over21));                            
            };
        };

        // function that does everything and is connected to the button
        function myFunction(){
            // Getting data from a user connecting variables with textboxes by ID
            var age = document.getElementById('age').value;
            var hours = document.getElementById('hours').value;

            // Validation checking that entered number is not more than 150 
            // And also if age is correct
            if((hours < 150 && hours > 0) && (age < 150 && age > 12)){
                magic(age, hours);
            }else{
                alert("Wrong!");
            };
        };
  </script>
</head>
<body>
    <label>Enter your age.(12-150)</label>
    <input type="text" class="textBox" id="age"><br>
    <label>Enter how long will you work.(1-150)</label>
    <input type="text" class="textBox" id="hours"><br>
    <button onclick="myFunction()" >How much will i make ?</button>
</body>
</html>​

As an additional note, you're multiplying age by under21 or over21. I'm pretty sure you want to multiply hours by under21 or over21 instead.

Upvotes: 0

user757095
user757095

Reputation:

if that's the code i can spot 3 errors:

  1. you're accessing the dom before it's loaded and only once, try to assign the vars when you need them.
  2. you're assigning the vars the dom object instead of their values, use getElementById("mycoolid").value
  3. you're not assigning the type to the button element, different browser assign different default di this attribute.

Upvotes: 0

Chase
Chase

Reputation: 29549

I would suggest not using so many global variables.

Move:

var age = document.getElementById('age');
var hours = document.getElementById('hours');

into myFunction().

You'll then need to make those two:

var age = parseInt(document.getElementById('age').value);
var hours = parseInt(document.getElementById('hours').value);

We use parseInt to take the value as a string and turn it into an integer value.

Since age and hours are now defined in myFunction, you'll need to pass age to magic()

    var over21 = 6.19;
    var under21 = 5.19;

    // function wich does all of the calculation
    function magic(age){

      //cheking if he is under or over 21 
       if(age < 21){
             alert("You will make " + (age*under21));
       }else{
             alert("You will make " + (age*over21));                            
       };
    };
    // function that does everything and is connected to the button
    function myFunction(){

    var age = parseInt(document.getElementById('age').value);
    var hours = parseInt(document.getElementById('hours').value);
     // Validation checking that entered number is not more than 150 // And also if age is correct
     console.log(age + " : " + hours)   
        if((hours < 150 && hours > 0) && (age < 150 && age > 12)){
           magic(age);
        }else{
            alert("Wrong!");
        };
    };

Also, if you want (1-150), you'll need to modify this if statement: 

if((hours < 150 && hours > 0) && (age < 150 && age > 12)){ ... }

to:

if((hours <= 150 && hours > 0) && (age <= 150 && age > 12)){ ... }

Lastly, I believe the math may be incorrect in the magic() function:

function magic(age, hours){

  //cheking if he is under or over 21 
   if(age < 21){
         alert("You will make " + (hours*under21));
   }else{
         alert("You will make " + (hours*over21));                            
   };
};

I believe you wanted hours*under21 and hours*over21. Note that hours is now also being passed in as a parameter.

EXAMPLE

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

The getElementById calls are being run before the elements you are trying to get even exist.

You can either move them inside the function, or to another <script> at the end of the <body>.

Then, to access the value itself, use age.value and hours.value. You should also run them through parseInt(...,10) to ensure they are numbers.

Upvotes: 0

Louis Ricci
Louis Ricci

Reputation: 21086

var age = document.getElementById('age').value;
var hours = document.getElementById('hours').value;

You were getting HTML element object not the "value" they contained.

Upvotes: 4

Related Questions