在javascript中爲函數使用數組

我試圖創建一個使用函數數組來循環執行順序的程序。我已經包括下面的程序，有人可以請建議我做錯了什麼。我已經創建了一套HTML上的交通燈，我試圖寫一些JavaScript，將改變單擊按鈕時顯示哪個燈。我已經創建了一組函數，用於確定我想要燈光出現的順序。我還編寫了將顯示每個燈光的功能。我是新來的JavaScript，任何幫助將不勝感激。在javascript中爲函數使用數組

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Task three</title> 
    <link href="Task 3-CSS.css" rel="stylesheet" type="text/css" /> 
    <script src="Task3-Java.js"></script> 
</head> 

<body> 

<div id="control_panel"> 
    <button onclick="change_light">Change Light</button> 
</div> 

<div id="traffic_light"> 
    <div id="red_light" class="light"></div> 
    <div id="amber_light" class="light"></div> 
    <div id="green_light" class="light"></div> 
</div> 
</body> 
</html> 

var light_array=[red,red_amber,green,amber]; 
var light_index = 0; 

function no_light(){ 
    document.getElementById('red_light').style.backgroundColor = "black"; 
    document.getElementById('amber_light').style.backgroundColor = "black"; 
    document.getElementById('green_light').style.backgroundColor = "black"; 
} 

function red(){ 
    no_light(); 
    document.getElementById('red_light').style.backgroundColor="red"; 
} 

function red_amber(){ 
    no_light(); 
    document.getElementById('red_light').style.backgroundColor="red"; 
    document.getElementById('amber_light').style.backgroundColor="orange"; 
} 

function green(){ 
    no_light(); 
    document.getElementById('green_light').style.backgroundColor="green"; 
} 

function amber(){ 
    no_light(); 
    document.getElementById('amber_light').style.backgroundColor="orange"; 
} 

function change_light(){ 
    light_array[light_index](red,red_amber,green,amber); 
    light_index++; 
    if (light_index > 3){light_index = 0;} 

} 
change_light();

來源

2017-04-18 Lewis TAYLOR

你能告訴我們你有什麼問題？你有錯誤嗎？ –

你應該改變你的標籤sas，這不涉及Java。 Java和Javascript完全不同。 –

我總是想知道爲什麼那些不是那麼複雜的不完整問題在發佈後的幾秒鐘內就投了票。 –

前

使用增量，我建議把所有的document.getElementById()變量聲明。

在HTML而不是做onclick="change_light"你應該做的onclick="change_light()"

在一個行，您可以用light_index = (light_index >= 3) ? 0 : ++light_index;

處理light_index變量答案的其餘部分已經很好地覆蓋所有其他的點。

工作例如：

var light_array = [red, red_amber, green, amber], 
 
    light_index = 0, 
 
    red_light_elem = document.getElementById('red_light'), 
 
    amber_light_elem = document.getElementById('amber_light'), 
 
    green_light_elem = document.getElementById('green_light'); 
 

 
function no_light() { 
 
    red_light_elem.style.backgroundColor = 'black'; 
 
    amber_light_elem.style.backgroundColor = 'black'; 
 
    green_light_elem.style.backgroundColor = 'black'; 
 
} 
 

 
function red() { 
 
    no_light(); 
 
    red_light_elem.style.backgroundColor = 'red'; 
 
} 
 

 
function red_amber() { 
 
    no_light(); 
 
    red_light_elem.style.backgroundColor = 'red'; 
 
    amber_light_elem.style.backgroundColor = 'orange'; 
 
} 
 

 
function green() { 
 
    no_light(); 
 
    green_light_elem.style.backgroundColor = 'green'; 
 
} 
 

 
function amber() { 
 
    no_light(); 
 
    amber_light_elem.style.backgroundColor = 'orange'; 
 
} 
 

 
function change_light() { 
 
    light_array[light_index](); 
 
    light_index = (light_index >= 3) ? 0 : ++light_index; 
 
}

<div id="control_panel"> 
 
    <button onclick="change_light()">Change Light</button> 
 
</div> 
 

 
<div id="traffic_light"> 
 
    <div id="red_light" class="light">red</div> 
 
    <div id="amber_light" class="light">amber</div> 
 
    <div id="green_light" class="light">green</div> 
 
</div>

來源

2017-04-18 13:54:21

你調用的功能和存儲結果在數組中。你應該只引用它們（不()）：

var light_array=[red,red_amber,green,amber];

然後打電話給他們，當你想打電話給他們（例如，在change_light）：

light_array[light_index](); 
// ---------------------^

BTW，代碼更新light_index是不正確的，您應該遞增之前if：

function change_light(){ 
    light_array[light_index](); 
    light_index++;       // <== Moved this up 
    if (light_index > 3){light_index = 0;} 
}

...但有應該是一個方便的技巧，結合成一個表達：

function change_light(){ 
    light_array[light_index](); 
    light_index = (light_index + 1) % light_array.length; 
}

，處理環繞你。還請注意我是如何使用light_array.length而不是硬編碼的，因此如果您在數組中添加/刪除條目，代碼仍然有效。

來源

2017-04-18 13:36:08

@YosvelQuintero：謝謝你讓我知道，我忘記了這些parens。現在修復。 –

可以使用的結果，而不是試圖改變這一行

var light_array=[red(),red_amber(),green(),amber()];

這一個

var light_array=[red,red_amber,green,amber];

來源

2017-04-18 13:36:35 DanBreakingNews

你有三個問題（如果剩下的工作）

功能編號

var light_array = [red, red_amber, green, amber];

缺少的功能

light_array[light_index](); 
//      ^^

電話您存儲在light_array的函數的引用。至call a function，您需要用括號來調用它。檢查

function change_light() { 
    light_array[light_index](); // call function 
    light_index++;    // increment counter 
    if (light_index > 3) {  // check counter 
     light_index = 0; 
    } 
}

來源

2017-04-18 13:37:58

感謝您的回覆，但您能否解釋第2部分？ –

我已經做了一些改變 –

更改*，但我不知道如何調用函數 –

在javascript中爲函數使用數組

回答

相關問題