Javascript不工作/正在加载

Javascript Not Working/Loading

本文关键字：加载 工作 Javascript      更新时间：2023-09-26

我尝试过使用JSFiddle中的一些代码，它运行得很好。

尽管当我尝试用HTML实现它时，它的工作方式不同。

到目前为止，我拥有的是：

Javascript：

var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
    if(this.checked){
        sendbtn.disabled = false;
    } else {
        sendbtn.disabled = true;
    }
}

HTML:

<h1>Button should be enabled if at least one checkbox is checked</h1>
<input type="checkbox" id="checkme"/><input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " disabled/>

您需要将脚本包装在window.onload事件中，以确保dom元素可用。

window.onload = function() {
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
checker.onchange = function(){
   if(this.checked) sendbtn.disabled = true;
   else sendbtn.disabled = false;
}
}
<input type="checkbox" id="checkme"/>
<input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " />

您的javascript需要位于<script>标记中。根据你的问题，还不清楚它们是不是，所以我认为它们不是：

<html>
<head><title>Still learning</title></head>
<body>
<script type="text/javascript">
window.onload = function() {
  var checker = document.getElementById('checkme');
  var sendbtn = document.getElementById('sendNewSms');
  checker.onchange = function(){
    if(this.checked){
        sendbtn.disabled = false;
    } else {
        sendbtn.disabled = true;
    }
  }
};
</script>
<h1>Button should be enabled if at least one checkbox is checked</h1>
<input type="checkbox" id="checkme"/><input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " disabled/>
</body>
</html>

阅读html基础

此错误：未捕获类型错误：无法设置空的属性"onchange"

在html完成完全加载之前，您的javascript正在执行。这就是document.getElementById('checkme')返回null的原因。将函数放入window.onload中，然后像这样将脚本插入<head>中。

<html>
<head><title>Still learning</title>
<script>
 window.onload = function() {
  var checker = document.getElementById('checkme');
  var sendbtn = document.getElementById('sendNewSms');
  checker.onchange = function(){
    if(this.checked){
        sendbtn.disabled = false;
    } else {
        sendbtn.disabled = true;
    }
  }
};
</script>
</head>
<body>
<h1>Button should be enabled if at least one checkbox is checked</h1>
<input type="checkbox" id="checkme"/><input type="submit" name="sendNewSms" class="inputButton" id="sendNewSms" value=" Send " disabled/>
</body>
</html>

现在应该可以了。看看这把小提琴：http://jsfiddle.net/brbcoding/n9z5D/

相关文章：