I need a function that can check if user input is specific number that I want or not

Question

I want a function in JavaScript. It should accept a user number from an <input> and then it should check if the user number is 21. If it is, alert "T"; if it was another number, alert "F". The function should trigger when the <input> has been clicked.

var userNum = document.getElementById("number-input");

function num(userNum) {
  if (userNum === 21) {
    window.alert("T");
  }
  else {
    window.alert("F");
  }
}

<input onclick="num();" value="Check" type="submit" style="border-radius: 10px;" class="btn btn-dark mb-1" />

`userNum` is your element, you need to get its value. One way to do this is to use `userNum.valueAsNumber`, or to use `userNum.value` and then convert it to a number. Conversion to a number only needs to be done if you're strictly comparing `===` with the number `21` — Nick Parsons, May 21 '21 at 12:15
You used `getElementById` but you didn't specify any id in your `input` tag. You should put `id="number-input"`. Also, get the value by appending ".value" to `getElementById`. — Gaëtan Boyals, May 21 '21 at 12:16
I'm really new to JavaScript. Could you please give the code? — Adon, May 21 '21 at 12:16
Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, May 21 '21 at 12:19
You'll need two inputs for this example: one of type text and one of type submit. Attach the click handler to the submit input using addEventListener like @SebastianSimon recommends. Inside of the click handler grab the text input using `getElementById("number-input").value`. You'll need to put `id="number-input"` inside of your text input tag. Also, welcome to JS! I recommend getting very familiar with [MDN](https://developer.mozilla.org/en-US/docs/Web/Events/Event_handlers). — hert, May 21 '21 at 14:43

score 0 · Answer 1 · answered May 21 '21 at 12:15

You should read a little about how parameters and variables work in a function. Here is the solution.

userNum is the object pointing to the DOM Node. You can use the value property to get the value inside it.

<input onclick="num();" value="Check" type="submit" style="border-radius: 10px;" class="btn btn-dark mb-1"/>

var userNum = document.getElementById("number-input");
        function num() {
          if (userNum.value === 21) {
            window.alert("T");
          } else {
            window.alert("F");
          }
        }

Also, === and == are different. Good that are using '===' but it will do type checking too, so make sure input type is a number not string.

score 0 · Answer 2 · answered May 21 '21 at 12:16

Remove the "userNum" argument from your JS function;

Move the "var userNum = document.getElementById("number-input");" line inside your function;

Change "var userNum = document.getElementById("number-input");" to "var userNum = document.getElementById("number-input").value;"

Use "num(); return true;" with button's OnClick event;

BTSM · Answer 3 · 2021-05-21T12:24:55.517

0

I think you can do like this. userNum is element, not value.

<script type="text/javascript">
  
  function num() {
    var userNuminput = document.getElementById("number-input");
    let userNum = userNuminput.value;
    if (userNum == 21) {
      console.log("T");
    } else {
      console.log("F");
    }
  }
</script> 


<input type="number" id="number-input"/>
<input onclick="num();" value="Check" type="submit" style="border-radius: 10px;" class="btn btn-dark mb-1"/>

edited May 21 '21 at 12:24

answered May 21 '21 at 12:17

BTSM

1,585
8
12
26

The value also needs to be made a number – Nick Parsons May 21 '21 at 12:21
So I insert `` – BTSM May 21 '21 at 12:22
1

Using `.value` will give a string, even if the input has `type="number"`. You can use `.valueAsNumber` though to get a number type, or convert the string into a number using something like the unary plus operator `+` or the `Number()` function (you could also use `==` if you want to ignore the types when comparing) – Nick Parsons May 21 '21 at 12:23
1

Oh, yes. I edited my answer. changed ``===`` to ``==`` – BTSM May 21 '21 at 12:25

score 0 · Answer 4 · answered May 21 '21 at 12:19

0

var userNum = document.getElementById("number-input");
    function num(userNum) {
      if (userNum.value === 21) {
        window.alert("T");
      } else {
        window.alert("F");
      }
    }

answered May 21 '21 at 12:19

Hanis Hapsa

129
1
7

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – mufazmi May 21 '21 at 18:20

Mohd Arshad · Answer 5 · 2021-05-21T13:03:25.810

I recommend not to trigger the function when the input in clicked, trigger it when the button is clicked isntead. You are using alert box so it will disturb the user if you trigger the function on input or any keyboard event. By the way this is my code for this problem. Maybe it will help you

HTML PART:-

<div>
  <input type="text" id="input">
  <button onclick="check()">Check</button>
</div>

JS PART:-

function check(){
  let input = document.getElementById("input");
  if(input.value == 21){
    alert("T");
  }else {
    alert("F");
  }
}

I need a function that can check if user input is specific number that I want or not

5 Answers5