堆栈内存溢出
  繁体   English   中英

为什么将这段JavaScript代码放在里面时不起作用 <head> 但是当放在底部时可以使用 <body>

[英]Why doesn't this piece of JavaScript code work when placed inside <head> but works when placed at the bottom of <body>

 原文  2011-08-25 17:44:50  7   5    javascript/ jquery/ javascript-events

问题描述

我试图编写这个基本的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>

我无法理解为什么将其放置在“头部”内时不起作用。

5 个解决方案

解决方案1
 1 已采纳  2011-08-25 17:48:55

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

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

解决方案2
 0  2011-08-25 17:49:16

可能是由于执行JavaScript时尚未加载id =“ para”的h1标签

解决方案3
 0  2011-08-25 17:49:32

我认为原因是您在window加载事件hanlder中定义了toggleColor方法。 尝试将其移出，然后尝试将代码放入头部。 

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

解决方案4
 0  2011-08-25 17:52:53

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>

解决方案5
 -2  2011-08-25 17:50:21

原因可能是由于您放置了脚本。 加载脚本后，该脚本将在此时运行。 因此，如果您有这样的html文件： 

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

该脚本文件将要运行，然后页面的其余部分将继续加载。 因为您已将para的赋值分配到togglecolor函数的上下文之外，所以它在加载时会获取其值； 可能在实际的HTML元素加载之前。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 放在HEAD中时，JavaScript无法在Safari中执行 如果将 JavaScript 放在 web 页面的主体内，JavaScript 将不起作用？ 放在head标签中的jQuery代码不起作用 DataTables在以下情况下不起作用<script>'s are placed at the end of file 当自定义javascript文件放在客户端文件夹中时，为什么我的Meteor模板上没有呈现自定义javascript文件？ 将脚本放在head标签内时，为什么HTML5 Canvas无法绘制？ 为什么将这个函数放在 promise 中时会中断？ 将 JavaScript 文件放入头部时，无法构建“CustomElement”错误 canvg不适用于已经放置在体内的svg？ Javascript在内部不起作用 <head> 要么 <body> 标签
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM