2013-09-27 46 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

相关问题