Question

我正在尝试学习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文件的帖子。我的联系正确，但没有按照我的意愿执行。

Answer 1

您正试图在加载dom之前设置颜色。下面是完美运作的代码。 在关闭正文标记

之前放置脚本

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

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

外部.js只运行代码的某些部分

1 个答案: