在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中为函数使用数组

回答

相关问题