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>
<!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>
