4

I have this small HTML file that when I enter a number in the input field, its onkeyup attribute triggers a button

Link here: https://www.w3schools.com/code/tryit.asp?filename=G8P7G9W1MFF4

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <input type=number min="1" max="5" value="1" class="example" name=text onKeyUp=myFunction();>

  <button id="myBtn" onclick="javascript:alert('Hello World!')">Try it</button>

  <script>
    function myFunction() {
      var x = document.getElementsByClassName("example");
      if (x[0].value > 0) {
        document.getElementById("myBtn").click();
      }
    }
  </script>

</body>

</html>

The function triggers correctly when I type into the input field, but I want to know why the arrows don't trigger the function also.

Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
Sam T
  • 105
  • 8

3 Answers3

3

Because the spin buttons aren't keys and therefore don't register a keyup event. But, you can register for the input event, which will trigger when the buttons are used.

Also, you're using some 25+ year old syntax, which you really should abandon. Don't set up your events inline with HTML and don't use .getElementsByClassName().

<!DOCTYPE html>
<html>
 <head>
  <title>Fun with Events</title>
 </head>
 <body>

  <input  type=number min="1" max="5" value="1" class="example" name="text"> 
  <button id="myBtn">Try it</button>

  <script>
    // Get your element references just once:
    let input = document.querySelector("input.example");
    let btn = document.getElementById("myBtn");

    // Register event handlers
    input.addEventListener("keyup", myFunction);
    input.addEventListener("input", myFunction);

    function myFunction() {
      if(input.value > 0) {
        document.getElementById("myBtn").click();   
      }
    }

    btn.addEventListener("click", function(){
      alert('Hello World!');
    });
  </script>
 </body>
</html>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • Thank you for the clarification, how come the button registers before the input updates. Is there a way to reverse this so that the alert appears after ? – Sam T Oct 06 '19 at 21:28
  • @SamT You're welcome. Please up vote all helpful answers and consider marking this one as "the" answer by clicking the check mark at the top-left of the answer. – Scott Marcus Oct 06 '19 at 21:30
  • How come the button registers before the input updates. Is there a way to reverse this so that the alert appears after ? – Sam T Oct 06 '19 at 21:39
  • 1
    @SamT This is because the OS is responsible for producing the alert and it does that faster than the JS engine runs. You can fix it by delaying the alert function. I've written about this before. You can read about the problem and the solution **[here](https://stackoverflow.com/questions/40899583/disabling-elements-with-alert-message-different-in-ie-and-chrome/40899643#40899643)**. – Scott Marcus Oct 06 '19 at 21:41
  • Haha God bless you Sir! – Sam T Oct 06 '19 at 21:46
1

You should use oninput instead of onKeyUp:

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <input type=number min="1" max="5" value="1" class="example" name=text oninput=myFunction();>

  <button id="myBtn" onclick="javascript:alert('Hello World!')">Try it</button>

  <script>
    function myFunction() {
      var x = document.getElementsByClassName("example");
      if (x[0].value > 0) {
        document.getElementById("myBtn").click();
      }
    }
  </script>

</body>

</html>
Alberto Trindade Tavares
  • 10,056
  • 5
  • 38
  • 46
1

Hi you could use id instead class, like so:

    const input = document.getElementById("myInput");
    const btn = document.getElementById("myButton");
    
    const myFunction = () => {
      if(input.value > 0) {
        btn.click();   
      }
    }
   
    input.addEventListener("keyup", myFunction);
    input.addEventListener("input", myFunction);   

    btn.addEventListener("click", () => console.log("myButton clicked"));
<input id="myInput" type=number min="1" max="5" value="1" class="example" name="text"> 
<button id="myButton">Try it</button>
rcoro
  • 326
  • 6
  • 12