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

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 已完全创建。将它放在 head 标签内时的不同情况

Answer 2

位于头部的脚本在渲染主体之前执行。所以您要定位的元素尚不存在。

Answer 3

尝试在 window.onload 事件处理程序中包装 js 引用元素，其中 js 在 head 元素中；因为当 .addEventListener 附加到 document.getElementById("submit")

时 #submit 元素未加载到 DOM

<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;
    }    
}

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

Why is the location of this script changing the behaviour of webpage?

html

javascript

addeventlistener

dom-events