在HTML页面中引入JS

Question

在HTML页面中引入JS

3

我想制作一个只有在单选按钮被选中时才能激活的提交按钮，它在JS Fiddle中完美运行。 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

- Emirhan Bayrak

3个回答

3

只需将您的脚本放在闭合body标签前即可：

<!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>

- Amel

2

将脚本放在body后面可能会起作用，但这不是有效的HTML。 - user663031

1

是的，在关闭 body 标签前放置它会更好。谢谢。 - Amel

2

这是因为您试图在页面渲染元素之前获取它们。

在jsFiddle中，它可以工作，因为他们将您的代码包装到一个 onload 事件中，然后当您尝试使用这些元素时，它们已经被渲染出来了。

有两种更简单的方法可以实现您想要的效果：

You can put your script tag right before ending the body tag, e.g:

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

Or you can wrap your code in a onload or DOMContentLoaded event:

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

- Buzinas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alex K. · Accepted Answer

目前您在页面完全加载之前尝试访问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默认为您执行此操作)