纯javascript检测数字类型输入值的变化

window.onload=函数init（）{
log（“DOM准备好了！”）；
var输入，值；
输入=document.getElementById（“yourGuess”）；
输入=输入值；
input.addEventListener（“检查”，检查，假）；
检查（值）；
}
功能检查（值）{
如果（输入<0&&输入>10）{
警报（“数字必须在0-10之间”）；
数值=0；
}
}

您可以选择：

函数更改（）{
var num=document.getElementById（“num”）.value；
如果（num>10 | | num<0）{
警报（“编号不在范围内”）；
}
}

函数更改（）{
var num=document.getElementById（“num”）.value；
如果（num>10 | | num<0）{
警报（“编号不在范围内”）；
}
}

---

代码中存在多个问题

• 您正在将

  input

  设置为

  input.value

  ，因此输入将成为一个

  字符串

  ，而该字符串没有

  addEventListener

• 使用

  更改

  事件，而不是

  检查

• 检查

  方法无法查看

  输入

  ，因此请依赖

  事件。目标

• 您的if条件需要或

  |

  而不是

  &

演示

window.onload=函数init（）{
log（“DOM准备好了！”）；
var input=document.getElementById（“yourGuess”）；
输入。addEventListener（“更改”，检查，错误）；
}
功能检查（事件）
{
var输入=编号（事件.目标.值）；
控制台日志（输入）；
如果（输入<0 | |输入>10）{
警报（“数字必须在0-10之间”）；
数值=0；
}
}

您可以选择：

代码中存在多个问题

• 您正在将

  input

  设置为

  input.value

  ，因此输入将成为一个

  字符串

  ，而该字符串没有

  addEventListener

• 使用

  更改

  事件，而不是

  检查

• 检查

  方法无法查看

  输入

  ，因此请依赖

  事件。目标

• 您的if条件需要或

  |

  而不是

  &

演示

window.onload=函数init（）{
log（“DOM准备好了！”）；
var input=document.getElementById（“yourGuess”）；
输入。addEventListener（“更改”，检查，错误）；
}
功能检查（事件）
{
var输入=编号（事件.目标.值）；
控制台日志（输入）；
如果（输入<0 | |输入>10）{
警报（“数字必须在0-10之间”）；
数值=0；
}
}

您可以选择：

• 您正在将addeventlistener设置为输入值
• 您试图在check函数中使用输入，但该函数在该方法中不可用，因为它未在该函数的范围内定义

  window.onload=函数init（）{
  log（“DOM准备好了！”）；
  var值；
  var input=document.getElementById（“yourGuess”）；
  value=input.value；
  input.addEventListener（“更改”，检查）
  }
  函数检查（）{
  如果（this.value<0 | | this.value>10）{
  警报（“数字必须在0-10之间”）；
  数值=0；
  }
  }
  

  您可以选择：
  

  • 您正在将addeventlistener设置为输入值
  • 您试图在check函数中使用输入，但该函数在该方法中不可用，因为它未在该函数的范围内定义

    window.onload=函数init（）{
    log（“DOM准备好了！”）；
    var值；
    var input=document.getElementById（“yourGuess”）；
    value=input.value；
    input.addEventListener（“更改”，检查）
    }
    函数检查（）{
    如果（this.value<0 | | this.value>10）{
    警报（“数字必须在0-10之间”）；
    数值=0；
    }
    }
    

    您可以选择：
    

    • 您正在使用字符串值覆盖

      HTMLInputElement

      ，因此您得到了错误
    • 将

      onchange

      事件与

      文档一起使用。addEventListener

    • 我使用了

      DOMContentLoaded

      方法，它为您提供了更好的想法，而不是使用

      window.onload

    document.addEventListener（'DOMContentLoaded'，function（）{
    document.querySelector（“#yourgess”）.onchange=check；
    }，假）；
    功能检查（事件）{
    如果（event.target.value>10 | | event.target.value<0）{
    警报（“数字必须在0-10之间”）；
    event.target.value=0；
    } 
    }

    您可以选择：
    

    • 您正在使用字符串值覆盖

      HTMLInputElement

      ，因此您得到了错误
    • 将

      onchange

      事件与

      文档一起使用。addEventListener

    • 我使用了

      DOMContentLoaded

      方法，它为您提供了更好的想法，而不是使用

      window.onload

    document.addEventListener（'DOMContentLoaded'，function（）{
    document.querySelector（“#yourgess”）.onchange=check；
    }，假）；
    功能检查（事件）{
    如果（event.target.value>10 | | event.target.value<0）{
    警报（“数字必须在0-10之间”）；
    event.target.value=0；
    } 
    }

    您可以选择：
    

    为什么这样做：

    input=input.value因此，下一行将抛出错误为什么要这样做：
    input=input.value因此，下一行将抛出错误