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
Wo ist ich definiert? Das sehe ich nicht in deinem Code. – Danmoreng
Ihr Zustand if (funcSelect == 3) hat einen Tippfehler, sollte es sein, wenn (funcSelectOperator == 3) –