0

我正在努力学习 Javascript 并苦苦挣扎！我对 CSS 和 HTML 的理解达到了一个不错的水平，并制作了一个非常基本的文件来帮助我学习基本的 Javascript 函数。我只想知道我正在做的事情是否在正确的道路上？我想单击不同的颜色框并更改主框。我在这里做了一个小提琴链接：http: //jsfiddle.net/Margate/mN9hs/

这应该是不言自明的。什么都不会用，我只想学习！经过几个小时试图解决它，我完全不知道为什么它不起作用！非常感谢您的任何帮助/指导....

<!DOCTYPE html><html><head><title> Learning Page!</title>

<style type="text/css">
#MainContent{position: relative; margin: 0px auto; top: 10px; border: 2px solid black; width: 500px; height: 250px;}
#ChangeThis{position: absolute; top: 10px; left: 50px; width: 400px; height: 100px; background-color: red; border: 2px solid black;}
#ColourBoxContiner{position: absolute; left: 99px; top: 120px; width: 302px; height: 102px; border: 1px solid black;}
#RedBox{position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; background-color: red; border: 1px solid black; cursor: pointer;}
#YellowBox {position: absolute; top: 0px; left: 100px; width: 100px; height: 100px; background-color: yellow; border: 1px solid black; cursor: pointer;}
#GreenBox {position: absolute; top: 0px; left: 200px; width: 100px; height:     100px;     background-color: green; border: 1px solid black; cursor: pointer;}
</style>
</head>

<body>
<div id="MainContent">
    <div id="ChangeThis"></div>
    <div id="ColourBoxContiner">
        <div id = "RedBox" onclick="ChangeColorOne()"></div>
        <div id = "YellowBox" onclick="ChangeColorTwo()"></div>
        <div id = "GreenBox" onclick="ChangeColorThree()"></div>
    </div>
</div>

<script>
function ChangeColorOne() {
    document.getElementById('ChangeThis').style="background.color:orange";
}
function ChangeColorTwo() {
    document.getElementById('ChangeThis').style="background.color:black";
}
function ChangeColorThree() {
    document.getElementById('ChangeThis').style="background.color:blue";
}
</script>
</body>
</html>
4

5 回答 5

3

当您设置背景颜色时，您应该使用不带句点的“backgroundColor”，如下所示：

function ChangeColorOne()
{document.getElementById('ChangeThis').style.backgroundColor="orange";}

function ChangeColorTwo()
{document.getElementById('ChangeThis').style.backgroundColor="black";}

function ChangeColorThree()
{document.getElementById('ChangeThis').style.backgroundColor="blue";}

顺便说一句，Codecademy是学习 Javascript 的好地方。您也可以使用w3Schools作为参考。

于 2013-05-14T18:02:03.980 回答
2

document.getElementById('ChangeThis').style="background.color:orange";

->

document.getElementById('ChangeThis').style.backgroundColor = "orange";

于 2013-05-14T17:58:20.753 回答
2

当您将 JavaScript 设置为 时，小提琴将不起作用（或者在 chrome 上对我不起作用）onLoad，尝试一下No wrap - in <head>，您的 JavaScript 中有一点语法错误。除此之外，你非常接近。

例如。

function ChangeColorOne() {
    document.getElementById("ChangeThis").style.backgroundColor = "orange";
}

在您的小提琴上查看此更新版本：http: //jsfiddle.net/mN9hs/1/

于 2013-05-14T18:02:53.750 回答
1

停止使用 HTML onclick 属性，通过 JS 绑定点击事件。该结构是yourElement.addEventListener("click", yourfunction);如果您的功能在范围内可用。如果您分配了多个，并且您没有阻止您的事件冒泡，那么您的所有观察者都会收到该消息。

于 2013-05-14T17:58:32.483 回答
1

好的，伙计，这是您处于工作状态的片段。

实际上你需要这样做：

function ChangeColorOne()
{document.getElementById('ChangeThis').style.backgroundColor="orange";}

function ChangeColorTwo()
{document.getElementById('ChangeThis').style.backgroundColor="black";}

function ChangeColorThree()
{document.getElementById('ChangeThis').style.backgroundColor="blue";}


ChangeColorOne();
ChangeColorTwo();
ChangeColorThree(); // call them all

看一看。希望它会帮助你=)。

于 2013-05-14T18:13:52.493 回答