javascript button onclick doesn't fire

Question

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>

Give the button a type? <button type="button" onclick="myFunction()" ></button> — jdstankosky
– jdstankosky, Commented Oct 22, 2012 at 19:45
Please provide full context of javascript functionality.. We need to know the status of the document when the javascript was getting processed. i.e.. Was the DOM loaded? — ilan berci
– ilan berci, Commented Oct 22, 2012 at 19:49

Louis Ricci · Accepted Answer · 2012-10-22 19:46:52Z

4

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

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

answered Oct 22, 2012 at 19:46

Louis Ricci

21.1k5 gold badges50 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nathan Wheeler Over a year ago

This also happens only once, on page load, so the values are always blank, and the result of the multiplication is NaN.

Chase · Accepted Answer · 2012-10-22 20:02:53Z

1

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

edited Oct 22, 2012 at 20:02

answered Oct 22, 2012 at 19:55

Chase

29.6k1 gold badge52 silver badges49 bronze badges

2 Comments

user1134746 Over a year ago

thx a lot ! now i see how much stupid stuff i have had made )))

Chase Over a year ago

Just a few mistakes, no worries. Happens to us all :)

Niet the Dark Absol · Accepted Answer · 2012-10-22 19:47:37Z

0

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.

answered Oct 22, 2012 at 19:47

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Comments

score 0 · Accepted Answer · 2012-10-22 20:03:50Z

0

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

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

edited Oct 22, 2012 at 20:03

answered Oct 22, 2012 at 19:58

user757095

Comments

Nathan Wheeler · Accepted Answer · 2012-10-22 20:07:15Z

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.

Collectives™ on Stack Overflow

javascript button onclick doesn't fire

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related