如何在Javascript中运行多个功能？

Question

我正在尝试学习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>

Answer 1

设置背景色时，应使用不带句点的“ 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是学习Java 语言的好地方。 您也可以使用w3Schools作为参考。

Answer 2

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

->

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

Answer 3

当您将JavaScript设置为onLoad ，小提琴将无法工作（或在chrome上对我来说不起作用），请尝试No wrap - in <head> onLoad ，并且JavaScript中有一些语法错误。 除此之外，你非常亲密。

例如。

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

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

Answer 4

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

Answer 5

好的，朋友，这是您工作中的片段。

实际上，您需要这样做：

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

看一看。 希望它能对您有所帮助=）。

如何在Javascript中运行多个功能？

问题描述

5 个解决方案

解决方案1
3 2013-05-14 18:02:03

解决方案2
2 2013-05-14 17:58:20

解决方案3
2 已采纳 2013-05-14 18:02:53

解决方案4
1 2013-05-14 17:58:32

解决方案5
1 2013-05-14 18:13:52

如何在Javascript中运行多个功能？

问题描述

5 个解决方案

解决方案1 3 2013-05-14 18:02:03

解决方案2 2 2013-05-14 17:58:20

解决方案3 2 已采纳 2013-05-14 18:02:53

解决方案4 1 2013-05-14 17:58:32

解决方案5 1 2013-05-14 18:13:52

解决方案1
3 2013-05-14 18:02:03

解决方案2
2 2013-05-14 17:58:20

解决方案3
2 已采纳 2013-05-14 18:02:53

解决方案4
1 2013-05-14 17:58:32

解决方案5
1 2013-05-14 18:13:52