onchange赋值的Javascript位置

Javascript position of onchange assignment

本文关键字：位置 Javascript 赋值 onchange      更新时间：2023-09-26

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

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

然而，我注意到，如果我移动<script>环境下的<输入>类似的框

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

为什么<script>环境对onchange属性起作用？

这是因为页面是从顶部解析的，并且在解析后立即添加每个元素。

当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>
相关文章：