onchange赋值的Javascript位置答案

【问题标题】：Javascript position of onchange assignmentonchange赋值的Javascript位置
【发布时间】：2015-03-28 17:41:59
【问题描述】：

我有一个复选框和一个文本输入。我希望仅在选中复选框时才启用文本输入。我找到了这个问题的答案here，但是下面的代码不起作用：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>title</title>
    <script type="text/javascript">
      document.getElementById('yourBox').onchange = function() {
        document.getElementById('yourText').disabled = !this.checked;
      };
    </script>
  </head>
    <body>
         <input type="text" id="yourText" disabled /> 
         <input type="checkbox" id="yourBox" />
    </body>
</html>

但是，我注意到如果我像这样将

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>title</title>
      </head>
        <body>
             <input type="text" id="yourText" disabled /> 
             <input type="checkbox" id="yourBox" />
         <script type="text/javascript">
          document.getElementById('yourBox').onchange = function() {
            document.getElementById('yourText').disabled = !this.checked;
          };
        </script>
        </body>
    </html>

为什么

【问题讨论】：

浏览器像我们一样阅读，从左上角到右下角。您的 javascript 导致错误，因为浏览器尚未读取您的元素以知道它存在。 window.onload 将解决您的问题，因为源代码只会在页面加载后被调用/使用。

标签： javascript checkbox onchange

【解决方案1】：

那是因为页面是从顶部开始解析的，每个元素一解析就添加进去。

当script 标签被解析后，代码将立即运行。当时input标签还没有被解析，所以input元素还不存在。

通过将script 标记放在input 标记下方，脚本将在input 元素创建后运行。

您可以使用onload 事件来确保代码在页面完全解析后运行，而不是重新排列代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>title</title>
    <script type="text/javascript">
      window.onload = function() {
        document.getElementById('yourBox').onchange = function() {
          document.getElementById('yourText').disabled = !this.checked;
        };
      };
    </script>
  </head>
    <body>
         <input type="text" id="yourText" disabled /> 
         <input type="checkbox" id="yourBox" />
    </body>
</html>

【讨论】：