为什么这个脚本的位置会改变网页的行为？ [复制]答案

【问题标题】：Why is the location of this script changing the behaviour of webpage? [duplicate]为什么这个脚本的位置会改变网页的行为？ [复制]
【发布时间】：2016-01-31 16:01:37
【问题描述】：

一个将文本字段内容大写的小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>

【问题讨论】：

标签： javascript html dom-events addeventlistener

【解决方案1】：

使用 document.ready 函数。

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

【讨论】：

【解决方案2】：

位于头部的脚本在渲染主体之前执行。因此，您尝试定位的元素还不存在。

【讨论】：

【解决方案3】：

尝试将js 引用元素包装在window.onload 事件处理程序中，其中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>

【讨论】：

【解决方案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;
    }    
}

【讨论】：