All geek questions in one place

Using an array for functions in javascript

I am trying to create a program that uses an array of functions to loop through execution order. I have included the program below, can someone please suggest what I did wrong. I created a set of traffic lights in HTML and tried to write some javascript for them that will change what kind of light is displayed when a button is clicked. I created an array of functions that defines the order in which I want the light to appear. I also wrote functions that will display every light. I am new to javascript, any help would be appreciated.

<!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();
+4
source share
4 answers

document.getElementById() .

html onclick="change_light" onclick="change_light()"

light_index light_index = (light_index >= 3) ? 0 : ++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>
Hide result
0

. ( ()):

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, , / , .

+1

You can try changing this line

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

for this

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

You have three problems (if the rest work)

  • using result instead of function reference

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

  • Missing function call

    light_array[light_index]();
//                      ^^

    You have saved the link to the function in light_array. To call a function , you need to call it with parentheses.

  • use increment before checking

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

Source: https://habr.com/ru/post/1675051/

More articles:


All Articles