Cuando el usuario hace clic en los botones , quiero que genere la respuesta correcta. Si el usuario pone 0 en el cuadro de entrada y luego hace clic en el botón, quiero que diga que esto es cero . Si es 1 o más, quiero que diga que es positivo . número . Si es -1 y menor, debería decir que este es un número negativo .
<!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>Entonces, primero no se repita, si desea crear un nuevo div y agregarlo, le recomendaré que lo haga una vez en su función.
const ele = document.createElement('div'); store.appendChild(ele); y debido a que está utilizando el número de tipo de entrada, debe obtener el valor como integrador con valueAsNumber .
Luego, debe actualizar el valor, sí, porque el valor cambia mientras carga el valor pero nunca lo actualiza. Por cierto, para un valor cambiante, no puede usar const pero necesita usar let or var .
btn.addEventListener('click', function() { let val = num.valueAsNumber; checker(val); });Aquí hay una versión funcional de su código: https://jsfiddle.net/4a17fsbn/
> const ele = document.createElement('div'); > if (num === 0){ > ele.innerHTML =num+' this is a zero'; > store.appendChild(ele); > }Intenta hacer referencia al elemento HTML y compararlo con cero. No es. Lo que debe hacer es verificar si el valor de la entrada coincide con su condición.
if (num.value == 0)Por cierto, no uses triples iguales aquí. El valor de entrada siempre es una cadena, pero lo compara con un número, por lo que "===" siempre devolverá un falso aquí. Convierta explícitamente el valor de entrada en un tipo de número o use doble igual.
Escribes demasiado código y tu código es ineficiente.
El problema principal es que el valor de un input type="number" no es necesariamente un número entero. Tan pronto como escribe en la entrada con un teclado, obtiene una cadena. Para resolver esto, simplemente necesita agregar un + antes de la cadena que la convierte en un número entero: +document.querySelector('#num').value .
Como se dijo anteriormente, su código es ineficiente. Puede obtener un aumento de la eficiencia con textContent en lugar de usar innerHTML , que requiere volver a analizar el DOM. Luego, solo escriba el código necesario real y combine eventListener con la función directamente.
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>