What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Change image with button toggle

Jerome

New member
A bit new to html, css and javascript and I am seeking help with switching between images for my home automation dashboard. When toggled "ON", it should display a sun image and a moon image when "OFF".

<!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>Dashboard</title>
<!-- Add font from Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<!-- Link CSS style sheet to html document -->
<link rel="stylesheet" href="style.css">
<!-- Link JavaScript file to html document -->
<script src="mqttws31.js"></script>
<script src="dashboard.js"></script>
</head>
<body>
<div class="header">
<h1>Home Automation Dashboard</h1>
</div>
<hr>
<div id="messages"></div>
<div id="status"></div>
<hr>
<ul class="dashboard">
<ol class="b">
<li class="dashboard_item kitchen">
<img src="./moon.svg" width="40px" height="40px" alt="">
<h4>Kitchen</h4>
<p id="kitchen-light">OFF</p>
<button id="kitchen-btn">Toggle</button>
</li>
<ol class="b"> <!-- in style.css add .b(list-style=none) do same for all lists add images as SVG add width and height as you need -->
<li class="dashboard_item frontdoor" >
<img src="./door-closed.svg" width="40px" height="40px" alt="">
<h4>Front Door</h4>
<p>CLOSED</p>
</li>
<ol class="b">
<li class="dashboard_item balconydoor">
<img src="./door-closed.svg" width="40px" height="40px" alt="">
<h4>Balcony Door</h4>
<p>CLOSED</p>
</li>
<ol class="b">
<li class="dashboard_item livingroom">
<img src="./moon.svg" width="40px" height="40px" alt="">
<h4>Livingroom</h4>
<p id="livingroom-light">OFF</p>
<button id="livingroom-btn">Toggle</button>
</li>
<ol class="b">
<li class="dashboard_item bedroom">
<img src="./moon.svg" width="40px" height="40px" alt="">
<h4>Bedroom</h4>
<p id="bedroom-light">OFF</p>
<button id="bedroom-btn">Toggle</button>
</li>
<ol class="b">
<li class="dashboard_item bathroom">
<img src="./moon.svg" width="40px" height="40px" alt="">
<h4>Bathroom</h4>
<p id="bathroom-light">OFF</p>
<button id="bathroom-btn">Toggle</button>
</li>
<ol class="b">
<li class="dashboard_item studyroom">
<img src="./moon.svg" width="40px" height="40px" alt="">
<h4>Studyroom</h4>
<p id="studyroom-light">OFF</p>
<button id="studyroom-btn">Toggle</button>
</li>
<ol class="b">
<li class="dashboard_item hall">
<img src="./moon.svg" width="40px" height="40px" alt="">
<h4>Hall</h4>
<p id="hall-light">OFF</p>
<button id="hall-btn">Toggle</button>
</li>
</ul>
</body>
</html>
 
Back
Top