My latest coding project involves creating a fun program where a button triggers a switch in colors for different images resembling a traffic light. Unfortunately, when I test the program by clicking the button, nothing seems to happen.
Check out below for the HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="jscript.js"></script>
<title>Light Switch Task</title>
</head>
<body>
<table align="center" style="border:groove;">
<tr>
<td>
<button id="btn" onclick="switchColors()">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>
For CSS styling (Nothing too complicated):
@charset "utf-8";
/* CSS Document */
.circles {
width:53px;
height:54px;
}
#c1 {
}
#c2 {
}
#c3 {
}
#btn {
}
JavaScript section for functionality:
var colorFunctions = [displayRed(), displayYellow(), displayGreen()];
var currentColorIndex = 0;
function switchColors() {
++currentColorIndex;
if (currentColorIndex == 3) {
currentColorIndex = 0;
}
colorFunctions[currentColorIndex];
}
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