如何在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