Why isn't the input box outputting the correct response-CodePudding

When the user clicks the buttons I want it to output the correct response.If the user puts 0 in the input box and then clicks the button I want it to say this is zero.If it 1 and higher I want it to say it positive number.If it -1 and lower it should say this is negative number.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>numberCheck</title>
    <style>
        body{
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Number Check</h1>
    <input type="number" id="num">
    <button id="submit">Submit</button>
    <div id="store"></div>
    
    <script>
        const num = document.getElementById('num');
        const data = num.value
        const btn = document.getElementById('submit');
        const store = document.getElementById('store');

        btn.addEventListener('click',()=>{
            checker();
        });

        function checker(){
            const ele = document.createElement('div');
            if (data === 0){
                ele.innerHTML =data ' this is a zero';
                store.appendChild(ele);
            }
            if (data <0){
                ele.innerHTML =data ' this is a negitive number';
                store.appendChild(ele);
            }
            if (data >0){
                ele.innerHTML =data ' this is a positive number';
                store.appendChild(ele);
            }
        }
    </script>
</body>
</html>

CodePudding user response：

So first do not repeat yourself, if you want to create a new div and append it i'll recommend u to do it once in your function.

const ele = document.createElement('div');
store.appendChild(ele);

and because you are using input type number u have to get the value as integrer with valueAsNumber.

Then you have to update the value, yes because the value change while u are loading the value but never updating it. By the way for a changing value u can't use const but need to use a let or var.

btn.addEventListener('click', function() {
  let val = num.valueAsNumber;
  checker(val);
});

Here is a working version of your code : https://jsfiddle.net/4a17fsbn/

CodePudding user response：

You write far too much code and your code is inefficient.

The main issue is, that the value of an input type="number"is not necessarily an integer. As soon as you write into the input with a keyboard then you get a string. To solve this you simply need to add a before the string which converts it to an integer: document.querySelector('#num').value.

As said above, your code is inefficient. One efficiency boost you can gain with textContent instead of using innerHTML which requires a re-parsing of the DOM. Then only write the actual necessary code and combine the eventListener with the function directly.

document.querySelector('#submit').addEventListener('click', function() {
  let nr =  document.querySelector('#num').value,
      el = document.querySelector('#store');
  if (nr === 0) {
    el.textContent = `${nr} this is a zero`;
  }
  if (nr < 0) {
    el.textContent = `${nr} this is a negative number`;
  }
  if (nr > 0) {
    el.textContent = `${nr} this is a positive number`;
  }
})

<h1>Number Check</h1>
<input type="number" id="num">
<button id="submit">Submit</button>
<div id="store"></div>

CodePudding user response：

> const ele = document.createElement('div');
>             if (num === 0){
>                 ele.innerHTML =num ' this is a zero';
>                 store.appendChild(ele);
>             }

You try to refer to the HTML element and compare it to zero. It's not. What you have to do is to check if the value of the input matches to your condition.

if (num.value == 0)

By the way, don't use triple equals here. The input value is always a string, but you compare it against a number, so "===" will always return a false here. Either explicitly convert input's value to a type of number or use double equals.

CodePudding user response：

you can use change event and get the value as per entered by the user

const inputField = document.getElementById("num");
let num = 0;
inputField.addEventListener("change", (e) => {
   num =  e.target.value;

});
btn.addEventListener("click", () => {
    checker(num);
});

function checker(num) {
  const ele = document.createElement("div");
  console.log(num);
  if (num === 0) {
    ele.innerHTML = num   " this is a zero";
    store.appendChild(ele);
  }
  if (num < 0) {
    ele.innerHTML = num   " this is a negitive number";
    store.appendChild(ele);
  }
  if (num > 0) {
    ele.innerHTML = num   " this is a positive number";
    store.appendChild(ele);
  }
}

or you can more simplify the code

btn.addEventListener("click", () => {
    checker( inputField.value);
});