window.onload = function init() {
  console.log("DOM is ready!");
  var input, value;
  
  input = document.getElementById("yourGuess");
  input = input.value;
  
  input.addEventListener("checking", check, false);
  
  check(value);
  
}

function check(value) {
  if(input < 0 && input > 10) {
    alert("The number must be between 0 - 10");
    value = 0;
  }
}
<label for="yourGuess">You choose: </label>
<input id="yourGuess" type="number" min="0" max="10">

No puedo encontrar ninguna solución en ningún lugar que corresponda al problema anterior.

Así que tengo una entrada de tipo de número y declaró un atributo min y max con el valor 0 y 10 respectivamente.

El usuario puede hacer clic en el campo de entrada y cambiar su valor fuera del rango, por lo tanto, necesito usar javasricpt para verificar los cambios realizados

0
Afiq Rosli 31 oct. 2017 a las 08:50

3 respuestas

La mejor respuesta
  • Está sobrescribiendo su HTMLInputElement con el valor que es una cadena, por lo tanto, obtiene un error.
  • Utilice el evento onchange junto con document.addEventListener.
  • ¡Tengo el método DOMContentLoaded que te da una mejor idea en lugar de usar window.onload!
document.addEventListener('DOMContentLoaded',function() {
    document.querySelector("#yourGuess").onchange=check;
},false);

function check(event) {
   if(event.target.value > 10 || event.target.value < 0){
      alert("The number must be between 0 - 10");
      event.target.value = 0;
   } 
}
<label for="yourGuess">You choose: </label>
<input id="yourGuess" type="number" min="0" max="10">
2
Dhaval Marthak 31 oct. 2017 a las 06:15
function change(){
var num = document.getElementById("num").value;
if(num > 10 || num < 0){
alert("Number is not in range");
}
}
<input id="num" type="number" min="0" max="10" onchange="change()">

Si escribe el número manualmente, debe dejar ese campo de entrada para verificar o puede usar otros métodos como onkeypress, etc.

0
Anil Shrestha 31 oct. 2017 a las 06:03

Múltiples problemas en su código

  • Está configurando input en input.value para que la entrada se convierta en String que no tiene addEventListener

  • Utilice el evento change en lugar de checking.

  • El método check no tiene visibilidad para input, así que confíe en event.target.

  • Su condición if necesita un OR || en lugar de &&

Demostración

window.onload = function init() {
  console.log("DOM is ready!");      
  var input = document.getElementById("yourGuess");
  input.addEventListener("change", check, false);
}

function check ( event ) 
{
  var input = Number(event.target.value);
  console.log(input);
  if(input < 0 || input > 10) {
    alert("The number must be between 0 - 10");
    value = 0;
  }
}
<label for="yourGuess">You choose: </label>
<input id="yourGuess" type="number" min="0" max="10">
1
gurvinder372 31 oct. 2017 a las 06:02