2013-09-27 70 views
1

我正在嘗試學習Javascript,並且遇到了外部.js文件的問題。我正在嘗試使不同的單選按鈕被選中時更改顏色的div。我已經得到它使用「onclick」屬性和一個js函數。不過,我無法使用javascript將div默認爲顏色。這裏是我使用的代碼:外部.js只運行代碼的某些部分

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript" src="jspract_j.js"></script> 
</head> 
<body> 
    <form name="form" action="jspract.html" method="post"> 
     <label><input type="radio" onclick="javascript:divcol(this.value);" name="color" id="red" value="red">Red</label><br> 
     <label><input type="radio" onclick="javascript:divcol(this.value);" name="color" id="yellow" value="yellow">Yellow</label><br> 
     <label><input type="radio" onclick="javascript:divcol(this.value);" name="color" id="blue" value="blue">Blue</label><br> 
     <label><input type="radio" onclick="javascript:divcol(this.value);" name="color" id="orange" value="orange">Orange</label><br> 
     <label><input type="radio" onclick="javascript:divcol(this.value);" name="color" id="purple" value="purple">Purple</label><br> 
     <label><input type="radio" onclick="javascript:divcol(this.value);" name="color" id="green" value="green">Green</label><br> 
     <br> 
    </form> 
    <div id="change"></div> 
    </body> 

和JavaScript:

function divcol(color) 
{ 
    document.getElementById("change").style.backgroundColor=color; 
} 

document.getElementById("change").style.backgroundColor="pink"; 

單選按鈕改變顏色,按預期工作。 div在加載時顯示爲白色,但不是粉紅色。這裏出了什麼問題?

我覺得我錯過了Javascript的一些關鍵部分。我試過搜索互聯網,但是我發現的所有內容都是關於錯誤鏈接.js文件的人的帖子。我的鏈接正確,但沒有執行我想要的。

回答

1

您正試圖在dom正在加載之前設置顏色。以下是完美工作的代碼。 將您的腳本主體標籤

http://jsbin.com/UkUGeJu/1/

收盤在顏色是粉紅色加載之前,當你改變相應的顏色得到更新。

+0

謝謝你這個工作 – user2529750

相關問題