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

时间:2015-04-05 14:29:47

标签: javascript html

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

3 个答案:

答案 0 :(得分: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基础知识

答案 1 :(得分:1)

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

答案 2 :(得分:1)

  

这一个:未捕获的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/