如何在Javascript中运行多个函数?

时间:2013-05-14 17:55:39

标签: javascript function

我正在努力学习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>

5 个答案:

答案 0 :(得分: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";}

BTW,Codecademy是学习Javascript的好地方。您也可以使用w3Schools作为参考。

答案 1 :(得分:2)

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

- &GT;

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

答案 2 :(得分:2)

当您将JavaScript设置为onLoad时,小提琴将不起作用(或不适合我使用Chrome),请尝试No wrap - in <head>并且您的JavaScript中有一点语法错误。除此之外,你非常接近。

例如

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

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

答案 3 :(得分:1)

停止使用HTML onclick属性并通过JS绑定click事件。如果您的函数在范围内可用,则结构为yourElement.addEventListener("click", yourfunction);。如果您指定了多个,并且您没有阻止您的事件冒泡,那么您的所有观察者都将收到消息。

答案 4 :(得分:1)

好的好友here是你工作状态的片段。

实际上你需要这样做:

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 

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