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

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

本文关键字：网页 改变 位置 脚本 为什么      更新时间：2023-09-26

一个小的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>

使用 document.ready 函数。

当您在关闭 body 标记之前放置代码时，DOM 已完全创建。当您将其放入 head tag 中时的不同情况<</p>

div class="answers">

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

尝试将引用元素包装js window.onload事件处理程序中，其中js位于head元素中;因为#submit元素在附加到.addEventListener时不会加载到DOM 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>

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

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