Question

用于大写文本字段内容的小型javascript函数如下：

<html>
<head>
<title>capitalize</title>
</head>

<body>
<input type="text" id="uname" length="20" /><br />
<input type="submit" id="submit" value="submit" />
<script>
document.getElementById("submit").addEventListener("click",eve);
function eve(){
    var uname = document.getElementById("uname").value; 
    uname = uname.toUpperCase();
    document.getElementById("uname").value=uname;
}
</script>
</body>

</html>

现在，这是正常工作。但是当我将javascript代码的位置更改为 head 标记时，它无效。

<html>
<head>
<title>key events</title>
<script>
document.getElementById("submit").addEventListener("click",eve);
function eve(){
    var uname = document.getElementById("uname").value; 
    uname = uname.toUpperCase();
    document.getElementById("uname").value=uname;
}
</script>
</head>

<body>
<input type="text" id="uname" length="20" /><br />
<input type="submit" id="submit" value="submit" />

</body>

</html>

Answer 1

使用document.ready函数。

在关闭body标签之前放置代码时，DOM已完全创建。将它放在头标记内的不同情况

Answer 2

位于头部内的脚本在渲染正文之前执行。因此，您尝试定位的元素尚不存在。

Answer 3

尝试在js事件处理程序中包含window.onload引用元素，其中js位于head元素内;因为当#submit附加DOM

时，.addEventListener元素未加载到document.getElementById("submit")

<html>

<head>
  <title>key events</title>
  <script>
    window.onload = function() {
      document.getElementById("submit").addEventListener("click", eve);

      function eve() {
        var uname = document.getElementById("uname").value;
        uname = uname.toUpperCase();
        document.getElementById("uname").value = uname;
      }
    }
  </script>
</head>

<body>
  <input type="text" id="uname" length="20" />
  <br />
  <input type="submit" id="submit" value="submit" />

</body>

</html>

Answer 4

当在头部时，您的脚本在加载页面的其余部分之前执行。确保您等待加载页面：

window.onload = function() {
    document.getElementById("submit").addEventListener("click",eve);
    function eve(){
        var uname = document.getElementById("uname").value; 
        uname = uname.toUpperCase();
        document.getElementById("uname").value=uname;
    }    
}

为什么此脚本的位置会改变网页的行为？

4 个答案: