Question

我想创建一个仅在选中单选按钮时激活的提交按钮，它在JS小提琴中完美运行http://jsfiddle.net/sYNj7/94/

var checker = document.getElementById('checkme');
 var sendbtn = document.getElementById('sendNewSms');
 // when unchecked or checked, run the function
 checker.onchange = function(){
if(this.checked){
    sendbtn.disabled = false;
} else {
    sendbtn.disabled = true;
}

}
<input type="checkbox" id="checkme"/>
  <input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />

但是当我尝试使用notepad ++将其变成html页面时，它不起作用。我得到一个禁用的提交按钮旁边的单选按钮，但是当选中单选按钮时，提交按钮不会激活。这是我目前的代码。https://gist.github.com/anonymous/e5f19f5745396926ce02

Answer 1

目前您在页面完全加载之前尝试访问HTML元素;那时它们不可用。

<强> 1 即可。将代码放在命名函数中

function myFunc() { var checker = document.getElementById('checkme'); var sendbtn = document.getElementById('sendNewSms'); // when unchecked or checked, run the function ....

<强> 2 即可。使用body onload事件确保在所有HTML元素可供使用时运行：

<body onload="myFunc();">

（JSFiddle默认为你做这件事）

Answer 2

只需在关闭正文标记之前将脚本放入

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Captive portal</title> </head> <body> <input type="checkbox" id="checkme"/> <input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " /> <script> var checker = document.getElementById('checkme'); var sendbtn = document.getElementById('sendNewSms'); // when unchecked or checked, run the function checker.onchange = function(){ if(this.checked){ sendbtn.disabled = false; } else { sendbtn.disabled = true; } } </script> </body> </html>

Answer 3

之所以发生这种情况，是因为您在页面中呈现元素之前尝试获取这些元素。

在jsFiddle中，它可以工作，因为它们将您的代码包装到onload事件中，然后，当您尝试使用它们时，所有元素都已呈现。

有两种更简单的方法可以达到你想要的效果：

您可以在结束script标记之前放置body标记，例如：

 <!DOCTYPE html>
 <html>
 <head>
 </head>
 <body>
   <!-- all your content -->
   <script>
   </script>
 </body>
 </html>

或者您可以将代码包装在onload或DOMContentLoaded事件中：

<script>
document.addEventListener('DOMContentLoaded', function(e) {
  // your code goes here
});
</script>

在Html页面中包含JS

3 个答案: