2016-04-14 8 views
1

Ich erstelle ein Programm für die Praxis, wo eine Schaltfläche wechselt Farben zwischen verschiedenen Bildern in einer Ampel. Wenn ich jedoch auf die Schaltfläche klicke, passiert nichts.Funktionen in Arrays/HTML

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="styles.css"> 
     <script src="jscript.js"></script> 
     <title>Task 3</title> 
    </head> 

    <body> 
     <table align="center" style="border:groove;"> 
      <tr> 
       <td> 
        <button id="btn" onclick="switch()">Switch!</button> 
       </td> 
      </tr> 
      <tr> 
       <td> <img src="black-circle.png" class="circles" id="c1"> </td> 
      </tr> 
      <tr> 
       <td> <img src="black-circle.png" class="circles" id="c2"> </td> 
      </tr> 
      <tr> 
       <td> <img src="black-circle.png" class="circles" id="c3"> </td> 
      </tr> 
     </table> 

    </body> 
</html> 

CSS: (sehr einfach)

@charset "utf-8"; 
/* CSS Document */ 

.circles { 
    width:53px; 
    height:54px; 
} 

#c1 { 

} 

#c2 { 


} 

#c3 { 


} 

#btn { 


} 

JavaScript:

var funcSelect = [displayRed(), displayYellow(), displayGreen()]; 
var funcSelectOperator = 0; 
function switch() { 
    ++funcSelectOperator; 

    if (funcSelect == 3) { 
     funcSelectOperator = 0; 
    } 

    funcSelect[funcSelectOperator]; 
    } 

function displayRed() { 
    document.getElementById("c1").src = "red-circle.png"; 
    document.getElementById("c2").src = "black-circle.png"; 
    document.getElementById("c3").src = "black-circle.png"; 
} 

function displayYellow() { 
    document.getElementById("c1").src = "black-circle.png"; 
    document.getElementById("c2").src = "yellow-circle.png"; 
    document.getElementById("c3").src = "black-circle.png"; 
} 

function displayGreen() { 
    document.getElementById("c1").src = "black-circle.png"; 
    document.getElementById("c2").src = "black-circle.png"; 
    document.getElementById("c3").src = "green-circle.png"; 
} 
// JavaScript Document 
+0

Wo ist ich definiert? Das sehe ich nicht in deinem Code. – Danmoreng

+0

Ihr Zustand if (funcSelect == 3) hat einen Tippfehler, sollte es sein, wenn (funcSelectOperator == 3) –

Antwort

0

, die wegen Ihrer Switch-Funktion ist, die Variablen Rollen und don mischen‘ t führen Sie die Funktion aus. Entfernen Sie außerdem die Ausführung aus Ihrem Funktionsarray.

var funcSelect = [displayRed, displayYellow, displayGreen]; 
var funcSelectOperator = 0; 
function switchColor() { 
    if(funcSelectOperator == 2) 
     funcSelectOperator= 0; 
    else ++funcSelectOperator; 

    funcSelect[funcSelectOperator](); 
} 
+0

Ich habe das versucht, aber es funktioniert immer noch nicht –

+0

benennen Sie den Funktionsschalter von switchColor als "Schalter" ist ein besonderes Schlüsselwort – Kulvar

+0

Funktioniert immer noch nicht –