爲什麼當這段JavaScript代碼放在<head>內時不起作用，但放在<body>

的底部時工作我試圖編寫這個基本的JavaScript程序，當按下按鈕時它改變背景顏色。爲什麼當這段JavaScript代碼放在<head>內時不起作用，但放在<body>

當我把這個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>

我無法理解爲什麼它不工作時內「頭」的地方。

來源

2011-08-25 Jatin

嘗試在全局命名空間來定義togglecolor（），而不是在window.onload。 – ComFreek

...並將'para'傳遞給togglecolor（）作爲參數。 – Blazemonger

@ user603003是的...那是有效的。你能說出原因嗎？ – Jatin

這是一個範圍問題。您正在另一個功能中定義您的功能。這意味着它只能在該函數內部訪問。將它移到外面，一切都應該起作用。

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

來源

2011-08-25 17:48:55

可能是因爲一個事實，即使用id =「對」 h1標籤時，JavaScript是執行

來源

2011-08-25 17:49:16 lcv77

但我用window.onload來照顧。 – Jatin

還沒有加載我想原因是你已經定義toggleColor方法內window加載事件hanlder。嘗試將其移出並嘗試將代碼置於頭部。

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

來源

2011-08-25 17:49:32 ShankarSangoli

這是問題所在。唯一我要指出的是，他實際上並沒有在加載時調用函數。 –

@kingjiv當使用window.onload = togglecolor;是不是被調用的函數？ – Jatin

@Jatin - 當你設置這個方法時，它不會調用這個函數。它會在瀏覽器觸發'load'事件時調用。 – ShankarSangoli

-2

原因可能是由於您放置了該腳本。當一個腳本被加載時，它在那個點上運行; ergo，如果你有這樣的HTML文件：

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

腳本文件將要運行，然後頁面的其餘部分將繼續加載。由於您的para的分配發生在您的togglecolor函數的上下文之外，因此在加載時會獲取它的值;可能在實際的HTML元素被加載之前。

來源

2011-08-25 17:50:21 Tejs

這是真的，除了他在'window.onload'裏面有他的代碼。 –

因爲它是在加載時被調用的，所以它將它放在頭標籤中時會起作用;當它在身體標籤中時，他將其從onload事件中取出。 – Tejs

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>

來源

2011-08-25 17:52:53 genesis

爲什麼有人認爲這是錯的？謹慎解釋？ – genesis

不確定錯，但確實有點奇怪。不知道爲什麼你要把'document.ready'放在函數中。這是不好的。直到按鈕被點擊，函數纔會被調用。在那一點上會存在。 –

@king正確，已編輯。感謝您的建議 – genesis

爲什麼當這段JavaScript代碼放在<head>內時不起作用，但放在<body>

回答

相關問題