Trying a simple compare number script for study assignment

Question

I've been losing my mind now for a couple of hours as I can't find out what I'm doing wrong here. Trying to see if the input is equal to 3, if so then show a window saying "The number is equal to 3". Here's the HTML and Javascript:

    <input type="number" name="number" id="number">
    <button id="btn" onclick="checkNumber()">Button</button>
    <div>
        <span id="label"></span>
    </div>
<script>
    var number = document.getElementById("number").value;
    function checkNumber() {
        if (number === 3) {
            window.alert("The number is equal to 3");
        }
    }
</script>

Convert the input value to a number before comparison, or compare to a string — evolutionxbox, May 24 '21 at 09:48

otejiri · Answer 1 · 2021-05-24T10:03:06.497

0

Input value are strings, you can change them to number by adding "+" sign.

var number = document.getElementById("number");
function myFunc() {
 if (+number.value === 3) {
            window.alert("The number is equal to 3");
        }
}

<input type="number" name="number" id="number">
    <button id="btn" onclick="myFunc()">Button</button>
    <div>
        <span id="label"></span>
    </div>
<script>
  
</script>

edited May 24 '21 at 10:03

answered May 24 '21 at 09:52

otejiri

1,017
6
20

Thanks for the answer, but this question has been asked before. Please may you consider flagging questions as duplicates when they've been asked before? – evolutionxbox May 24 '21 at 09:53
1

flagged as duplicate – otejiri May 24 '21 at 09:55

dEBA M · Accepted Answer · 2021-05-24T10:16:47.947

The number variable should typecasted, i.e converted to number type from string type

function checkNumber() {
  var number = document.getElementById("number").value;
  var value = Number(number);
  if (value === 3) {
    alert("The number is equal to 3");
  } else {
    alert("The number is not equal to 3");
  }
}

<html>
  <body>
    <input id="number" name="number" type="number" />
    <button id="btn" type="button" onclick="checkNumber()">Check</button>
  </body>
</html>

score 0 · Answer 3 · answered May 24 '21 at 10:22

You are using === which checks both for type and value. the input received from the user is a string while 3 is a Number.

To solve that, you must first convert the input value to Number and then compare.

Also, i would add the reference for the element outside of the function and check for the current value each time the function gets called.

    var element = document.getElementById("number");
    function checkNumber() {
        const numberAsString = element.value;
        const number = Number(numberAsString);
        if (number === 3) {
            window.alert("The number is equal to 3");
        }
    }

   <input type="number" name="number" id="number">
    <button id="btn" onclick="checkNumber()">Button</button>
    <div>
        <span id="label"></span>
    </div>

Trying a simple compare number script for study assignment

3 Answers3