在 javascript 中为函数使用数组答案

【问题标题】：Using an array for functions in javascript在 javascript 中为函数使用数组
【发布时间】：2017-04-18 13:33:25
【问题描述】：

我正在尝试创建一个程序，该程序使用一组函数来循环执行顺序。我已经包含了下面的程序，有人可以建议我做错了什么。我在 HTML 上创建了一组交通信号灯，我正在尝试编写一些 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();

【问题讨论】：

您能告诉我们您遇到了什么问题吗？你有错误吗？
您应该更改标签，因为这与 Java 无关。 Java 和 Javascript 完全不同。
我总是想知道为什么不那么复杂的不完整问题会在发布后的几秒钟内获得投票。
我建议您添加相关的 HTML 并使其成为 Stack Snippet，这样我们就可以在您的问题中测试您的代码 - 查看关于 minimal reproducible example 的章节。此外，您忘记真正解释如何您的代码无法正常工作或无法达到您的预期。
我投了赞成票，可以吗？ :) 对我来说，它非常完整并且清楚 OP 的问题所在。

标签： javascript arrays function

【解决方案1】：

您正在调用函数并将结果存储在数组中。你应该只是指他们（没有()）：

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

然后在您想调用它们时调用它们（例如，在change_light）：

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

顺便说一句，更新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 而不是硬编码的数字，所以如果你在数组中添加/删除条目，代码仍然有效。

【讨论】：

@YosvelQuintero：谢谢你告诉我，我忘了括号。现已修复。

【解决方案2】：

我建议将所有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>

【讨论】：

【解决方案3】：

您可以尝试更改此行

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

为了这个

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

【讨论】：

【解决方案4】：

你有三个问题（如果其余的都正常的话）

使用结果而不是函数引用

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;
    }
}

【讨论】：

感谢您的回复，但请您解释一下第 2 部分吗？
我做了一些改变
changes* 但我不确定如何调用该函数
只使用light_array[light_index]();这一行，不带任何参数。它也适用，但没有任何意义。