1

我正在尝试学习 Javascript，但在使用外部 .js 文件时遇到了问题。我正在尝试制作一个在选择不同单选按钮时更改颜色的 div。我已经使用“onclick”属性和 js 函数让它工作。不过，我无法使用 javascript 将 div 默认设置为颜色。这是我正在使用的代码：

<!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 文件的帖子。我的链接正确，但没有按照我的意愿执行。

4

1 回答 1

1

dom您正在尝试在加载之前设置颜色。下面是完美运行的代码。将您的脚本放在 body 标签关闭之前

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

加载时颜色为粉红色，当您更改相应颜色时，相应颜色会更新。

于 2013-09-27T21:36:07.193 回答