Question

我尝试过使用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/>

Answer 1

您的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基础知识

Answer 2

您需要将脚本包装在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 " />

Answer 3

这一个：未捕获的TypeError：无法设置null的“onchange”属性

你的javascript在html完成加载之前正在执行。这就是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/

Javascript无法正常工作/正在加载

3 个答案: