HTML button won't call function. What's wrong?

Question

My html button won't call a function. I dont know what's wrong. The function seems to be ok but it does nothing when i call it. I am a begginer so sorry if the question is stupid or i am doing something wrong.

function max()
{
 var number1 = document.getElementById('first');
 var number2 =  document.getElementById('second');
    if (number1>number2)
    {
     document.getElementById('result').innerHTML = "The first number is larger";
    }
  else if (number1===number2)
    {
       document.getElementById('result').innerHTML = "The numbers are equal";
    }
  else
    {
      document.getElementById('result').innerHTML = "The second number is larger";
    }
  }

 <div id="box">
   <h3>Maximum between two numbers</h3>
   <p>First number: <input type="text"; id="first"></p><br>
  <p>Second number: <input type="text"; id="second"></p>
   <input type="submit"; id="submit"; value="Maximum"; onclick ="max()"> <br>
   <p>The result is:</p><span id="result"> </span>
</div>

Why do you have semicolons between your HTML attributes?! Where did you learn this?! Remove them! — Sebastian Simon, Aug 26 '16 at 07:21
Possible duplicate of [Uncaught TypeError: lang is not a function](http://stackoverflow.com/questions/38276407/uncaught-typeerror-lang-is-not-a-function) — same problem, just with `max` instead of `lang`. — Sebastian Simon, Aug 26 '16 at 07:23
I hope you don't mind, but I've edited your question to remove all that CSS because it isn't related to what you're asking about, and there was more CSS than JS and HTML combined. — nnnnnn, Aug 26 '16 at 07:25

score 0 · Answer 1 · answered Aug 26 '16 at 07:23

0

The problem was with the name of function :

function max_demo()
       {
         
        var number1 = document.getElementById('first');
        var number2 =  document.getElementById('second');
           if (number1>number2)
           {
            document.getElementById('result').innerHTML = "The first number is larger";
           }
         else if (number1===number2)
           {
              document.getElementById('result').innerHTML = "The numbers are equal";
           }
         else
           {
             document.getElementById('result').innerHTML = "The second number is larger";
           }
         }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="box">
   <h3>Maximum between two numbers</h3>
   <p>First number: <input type="text"; id="first"></p><br>
  <p>Second number: <input type="text"; id="second"></p>
   <input type="submit" id="submit" value="Maximum" onclick ="max_demo()"> <br>
   <p>The result is:</p><span id="result"> </span>
</div>

answered Aug 26 '16 at 07:23

Roma

272
1
12

Why was the name of the function a problem? – nnnnnn Aug 26 '16 at 07:28
If we use it as function name it throws an error of ''Uncaught TypeError: max is not a function". And also max() is a method in javascript – Roma Aug 26 '16 at 07:35
Nah it'll work, check this [codepen](http://codepen.io/Mi_Creativity/pen/AXGzmv?editors=1010) – Mi-Creativity Aug 26 '16 at 07:45
If `max()` is a method then why would it throw the error `max is not a function`? I know it *does* throw that error, but... Why can I create a global function called `max()` *and call it successfully* from another part of my script? You're on the right track, but the explanation is wrong. – nnnnnn Aug 26 '16 at 07:45
@Mi-Creativity -- can you please add "" In your code and check once. – Roma Aug 26 '16 at 07:53
Weird, why does ` – Mi-Creativity Aug 26 '16 at 08:20
I have same question :) – Roma Aug 26 '16 at 08:21
@Roma check the link in Charlie's answer, it describes the issue, but still it is not an attribute here it's a within two double qoutes – Mi-Creativity Aug 26 '16 at 08:23
@ Mi-Creativity..But When I change function name then why it is working properly>. – Roma Aug 26 '16 at 08:34
"*`max itself is an attribute in input elements. There are certain names you can't use for functions when called directly from DOM elements. Use another function name.`*" as in @CharlieH answer.. so if the function's name is same as one of the reserved words for `input` attributes it will throw an error, like `lang`, `max`, `type`, etc.. but the thing is, its use is not identical to attributes, it is in between qoutes `onclick="max()"` is not same as `max=""` – Mi-Creativity Aug 26 '16 at 08:37
So you have one of three fixes, **1st:** change the function's name, and stop using such keywords for naming. **2nd:** use `button` instead of `input type="submit"`. and **3rd:** *which I like the most always* stop calling functions from the DOM and use event listener from javascript... Best thing to do.. do all of these or at least the 1st and 3rd. – Mi-Creativity Aug 26 '16 at 08:41
Great ...Nice one :) – Roma Aug 26 '16 at 09:01

score -1 · Answer 2 · edited May 23 '17 at 12:22

-1

max itself is an attribute in input elements. There are certain names you can't use for functions when called directly from DOM elements. Use another function name.

Please see this answer.

edited May 23 '17 at 12:22

Community

1
1

answered Aug 26 '16 at 07:31

Charlie

22,886
11
59
90

HTML button won't call function. What's wrong?

2 Answers2