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

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

javascript html

Javascript 为什么此脚本的位置会改变网页的行为？,javascript,html,javascript-events,addeventlistener,Javascript,Html,Javascript Events,Addeventlistener,用于大写文本字段内容的小型javascript函数如下所示： <html> <head> <title>capitalize</title> </head> <body> <input type="text" id="uname" length="20" /><br /> <input type="submit" id="submit" value="submit" /> <scr

用于大写文本字段内容的小型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>


资本化


document.getElementById（“提交”）.addEventListener（“单击”，eve）；
函数eve（）{
var uname=document.getElementById（“uname”）.value；
uname=uname.toUpperCase（）；
document.getElementById（“uname”）.value=uname；
}

现在，它正常工作了。但是当我将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.getElementById（“提交”）.addEventListener（“单击”，eve）；
函数eve（）{
var uname=document.getElementById（“uname”）.value；
uname=uname.toUpperCase（）；
document.getElementById（“uname”）.value=uname；
}

使用document.ready函数

当您在关闭body标记之前放置代码时，DOM已经完全创建。

不同的情况下，当您将其放在头标签中时，请使用document.ready功能

当您在关闭body标记之前放置代码时，DOM已经完全创建。

不同的情况是，当您将其放在头部标记中时，位于头部内的脚本会在呈现主体之前执行。因此，您试图针对的元素还不存在。

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

尝试包装

js

在

窗口中引用元素。onload

事件处理程序，其中

js

位于

head

元素中；当

附加到文档.getElementById（“提交”）



关键事件
window.onload=函数（）{
document.getElementById（“提交”）.addEventListener（“单击”，eve）；
函数eve（）{
var uname=document.getElementById（“uname”）.value；
uname=uname.toUpperCase（）；
document.getElementById（“uname”）.value=uname；
}
}


尝试包装js
引用窗口中的元素。在js
位于head
元素中的onload
事件处理程序；当附加到文档.getElementById（“提交”）



关键事件
window.onload=函数（）{
document.getElementById（“提交”）.addEventListener（“单击”，eve）；
函数eve（）{
var uname=document.getElementById（“uname”）.value；
uname=uname.toUpperCase（）；
document.getElementById（“uname”）.value=uname；
}
}


在头部时，脚本在加载页面其余部分之前执行。确保等待页面加载：
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;
    }    
}

在头部时，脚本在加载页面其余部分之前执行。确保等待页面加载：
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;
    }    
}

可能的重复可能的重复