Question

我试图编写这个基本的JavaScript程序，当按下按钮时会改变背景颜色。

当我将这个JS代码放在'head'标签内时，它不起作用，但是当我把它放在'body'标签内时它就可以了。（当放入体内时我删除了window.onload）

<script>
window.onload = function(){
var para = document.getElementById("para");

function togglecolor(){
    if(para.className != "yellow") para.className = "yellow";
    else para.className = "notYellow";
}
}
</script>

这是HTML：

<h1 id="para" class="">Hello World! </h1>
<button onClick="togglecolor();">Press Me</button>

我无法理解为什么它在'head'中的位置时不起作用。

Answer 1

这是一个范围问题。您正在另一个函数中定义您的函数。这意味着它只能在该函数内访问。将它移到外面，一切都应该有效。

<script>
function togglecolor(){
    var para = document.getElementById("para");
    if(para.className != "yellow") para.className = "yellow";
    else para.className = "notYellow";
}
</script>

Answer 2

可能是因为在执行javascript时尚未加载id =“para”的h1标签

Answer 3

我认为原因是你在toggleColor load event hanlder中定义了window方法。尝试将其移出并尝试将代码置于头部。

<script>
function togglecolor(){
    var para = document.getElementById("para")
    if(para.className != "yellow") 
        para.className = "yellow";
    else 
        para.className = "notYellow";
}
window.onload = togglecolor;
</script>

Answer 4

http://sandbox.phpcode.eu/g/ea6d3/3

的工作原理。将window.onload更改为$(function(){

<html>
<body>
<style>
.yellow {color:yellow;}
.notYellow {color:blue;}
</style>
<script>
function togglecolor(){
        var para = document.getElementById("para");
        if(para.className != "yellow") 
             para.className = "yellow";
        else para.className = "notYellow";
}

</script>
</head>
<body>
<h1 id="para" class="notYellow">Hello World! </h1>
<button onClick="togglecolor();">Press Me</button>
</body>
</html>

Answer 5

原因可能是您放置了脚本。加载脚本时，它会在该点运行;如果你有一个像这样的html文件：

 <html>
   <head />
   <body>
     <script />
     <h1 />
     <button />
   </body>
 </html>

将运行脚本文件，然后页面的其余部分将继续加载。因为您在para函数的上下文之外发生了togglecolor，所以它在加载时会获得它的值;可能在加载实际HTML元素之前。

为什么这段JavaScript代码在放入内部时不起作用，但在放置在底部时起作用

5 个答案: