I am currently working on a basic project using HTML, CSS, and JS. My goal is to create a simple light bulb that can be turned on and off. Right now, I have both the images in the same directory, and I've managed to get it to turn off when clicked. However, once it's off, I can't click it again to turn it back on.
I want the ability to toggle the light switch repeatedly, turning it off and on as many times as I want. Do you have any suggestions or ideas? I'm trying to figure this out without relying on tutorials but I'm stuck.
Below is the code I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Light Switch</title>
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color: black;">
<img src="light-on.png" onclick="this.src='light-off.png'">
<img src="light-off.png" onclick="this.src='light-on.png'">
</body>
</html>