CODEWITHSUNDEEP
javascripthtml
AmirWG
AmirWG

Reputation: 281

checking if input is integer using javascript

that's what I have tried :

<html>
<head>
<script>
function myFunction() {
var num = document.getElementById("num").value;
if (Number.isInteger(num)) { 
document.getElementById("show").innerHTML = "Number is integer";
} else {
document.getElementById("show").innerHTML = "Number is not integer";
}
</script>
</head>
<body>
<input id = "num"></input>
<button onclick = "myFunction()">Submit</button>
<p id = "show">Result Appears Here</p>
</body>
</html>

the problem here is that i get "number is not integer" all the time even if the number is integer , the code supposed to check if input is integer or not thanks in advance

Upvotes: 3

Views: 16151

Answers (3)

kind user
kind user

Reputation: 41913

The value of the #num element is returned as a string as you can see in the console. Just revert it into a number using + sign.

Another thing - you are overwriting the innerHTML attribute of the #num element with every function call. You have to insert the second action document.getElementById("show").innerHTML = "Number is not integer" into the else statement to avoid overwriting.

function myFunction() {
  var num = document.getElementById("num").value;
  console.log(typeof num);

  if (Number.isInteger(+num)) {
    document.getElementById("show").innerHTML = "Number is integer";
  } else {
    document.getElementById("show").innerHTML = "Number is not integer";
  }
}
<input id="num"></input>
<button onclick="myFunction()">Submit</button>
<p id="show">Result Appears Here</p>

There's also another way to check if a number is integer, using modulo. 

function myFunction(num) {
  num % 1 ? console.log("Not Integer") : console.log("Integer");
}

myFunction(5);
myFunction(5.5);

Upvotes: 8

Manngo
Manngo

Reputation: 16409

Just a little bit of advice: learn how to properly indent your code:

function myFunction() {
    var num = document.getElementById("num").value;
    if (Number.isInteger(num)) { 
        document.getElementById("show").innerHTML = "Number is integer";
    }
    document.getElementById("show").innerHTML = "Number is not integer";
}

If you do, you will easily see that the last line will replace whatever you have put into the paragraph with Number is not integer.

You need an else to finish the job.

Also, whatever comes out of a text box is a string, so you will have to run it through parseInt first.

This might work better:

function myFunction() {
    var num = parseInt(document.getElementById("num").value,10);
    if (Number.isInteger(num)) { 
        document.getElementById("show").innerHTML = "Number is integer";
    }
    else document.getElementById("show").innerHTML = "Number is not integer";
}

Also:

  • input is a void element, meaning that it doesn’t have a closing tag.
  • For HTML attributes, you really shouldn’t have spaces around the = sign, as some browsers misinterpret this. For example: id="something"

Upvotes: 0

Putra Christianto Purba
Putra Christianto Purba

Reputation: 386

Uhm how about try this:

if(!isNaN(num)){
    if(Number.isInteger(num){
        //your code
    } else {
        //your code
    }
}

Upvotes: 0

Related Questions