如何在Javascript中运行多个功能？
[英]How do I run multiple functions in Javascript?
问题描述
I am trying to learn Javascript and struggling! 
我正在尝试学习Javascript并在挣扎中！ I have got my head around CSS & HTML to an ok level and have made a very basic file to help me learn basic Javascript functions. 我已经对CSS和HTML有了一个很好的了解，并制作了一个非常基本的文件来帮助我学习基本的Javascript函数。 I just want to know if what I am doing is on the right path? 我只想知道我在做的事是否正确？ I want to click on the different color boxes and change the main box. 我想单击不同的颜色框并更改主框。 I have made a fiddle link here: http://jsfiddle.net/Margate/mN9hs/ 我在这里做了一个小提琴链接： http : //jsfiddle.net/Margate/mN9hs/
This should be self explanatory. 这应该是不言自明的。 Nothing that will ever be used I just want to learn with it! 我只想从中学到什么都不会用！ After hours trying to work it out I am completely stuck as to why it is not working! 尝试工作了几个小时后，我完全无法理解它为什么不起作用！ Thank you very much for any help / guidance.... 非常感谢您的帮助/指导。
<!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 个解决方案
解决方案1
3 2013-05-14 18:02:03
When you are setting the background color you should be using "backgroundColor" without the period, like this: 设置背景色时，应使用不带句点的“ 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 is a great place to go to learn Javascript. 顺便说一句， Codecademy是学习Java 语言的好地方。 You can also use w3Schools as a reference. 您也可以使用w3Schools作为参考。
解决方案2
2 2013-05-14 17:58:20
document.getElementById('ChangeThis').style="background.color:orange";
->
document.getElementById('ChangeThis').style.backgroundColor = "orange";
解决方案3
2 已采纳 2013-05-14 18:02:53
The fiddle won't work (or won't for me on chrome) while you have the JavaScript set as onLoad , try No wrap - in <head> and you've a little syntax error in your JavaScript. 当您将JavaScript设置为onLoad ，小提琴将无法工作（或在chrome上对我来说不起作用），请尝试No wrap - in <head> onLoad ，并且JavaScript中有一些语法错误。 Apart from that you were very close. 除此之外，你非常亲密。
eg. 例如。
function ChangeColorOne() {
document.getElementById("ChangeThis").style.backgroundColor = "orange";
}
See this updated version on your fiddle: http://jsfiddle.net/mN9hs/1/ 在您的提琴上查看此更新的版本： http : //jsfiddle.net/mN9hs/1/
解决方案4
1 2013-05-14 17:58:32
Stop using HTML onclick attributes and bind the click events through JS. 停止使用HTML onclick属性，并通过JS绑定click事件。 The structure is yourElement.addEventListener("click", yourfunction); 结构为yourElement.addEventListener("click", yourfunction); if your function is available in the scope. 如果您的功能在范围内可用。 If you assign more than one, and you do not prevent your event from bubbling, all your observers will get the message. 如果分配多个，并且不阻止事件冒泡，则所有观察者都会收到该消息。
解决方案5
1 2013-05-14 18:13:52
Okay buddy here is your snippet in working condition. 好的，朋友， 这是您工作中的片段。
Actually you need to do as: 实际上，您需要这样做：
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
Have a look. 看一看。 Hope it will help you =) . 希望它能对您有所帮助=）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.