Question

<!doctype html>
<html>
  <head>
    <script>
      var a=document.getElementById("one").value;
      console.log(a);
    </script>
  </head>
  <body>
    <input type="text" id="one" name="acc" value="iss">
  </body>
</html>

在上面的代码片段中，我试图打印与id =“one”的输入相关联的值。

但我收到错误

无法读取null的属性'value'。

Answer 1

您需要将JavaScript放在正文的末尾。将它放在头部，意味着它甚至在DOM元素准备好之前就会执行。将它放在body的末尾，意味着JS将在加载body元素后执行：

＆＃13;

<html>

<body>
  <input type="text" id="one" name="acc" value="iss" />
  <script type='text/javascript'>
    var a = document.getElementById('one').value;
    console.log(a);
  </script>
</body>

</html>

＆＃13;

如果您使用JQuery，那么您的代码应该在$(document).ready(function(){ ... })

中

Answer 2

您需要将<script>...</script>部分放在文档的末尾：

<!doctype html>
<html>
    <body>
        <input type="text" id="one" name="acc" value="iss">
        <script>
          var a=document.getElementById("one").value;
          console.log(a);
        </script>
    </body>
</html>

或者您使用document.onready事件：

<!doctype html>
<html>
    <head>
        <script>
          document.addEventListener("load", function() {
              var a=document.getElementById("one").value;
              console.log(a);
          });
        </script>
    </head>
    <body>
        <input type="text" id="one" name="acc" value="iss">
    </body>
</html>

无法使用dom检索输入值

2 个答案: