Toggle button to change image state - Html

jerome
February 14, 2023
142 views
0 votes
2 Answers

A bit new to HTML, trying to create a dashboard. The state (ON, OFF, OPEN, or CLOSED) of a room or door should be indicated using an icon.

Have an open/close door image & lightbulbs Need help adding element to all the existing “li” elements.

Tried watching tutorials but they were too confusing.

<!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"> 
<li class="dashboard_item kitchen"> 
<h4>Kitchen</h4> 
<p>OFF</p> 
<button>Toggle</button> 
</li> 
<li class="dashboard_item frontdoor"> 
<h4>Front Door</h4> 
<p>CLOSED</p> 
</li> 
<li class="dashboard_item balconydoor"> 
<h4>Balcony Door</h4> 
<p>CLOSED</p> 
</li> 
<li class="dashboard_item livingroom"> 
<h4>Livingroom</h4> 
<p>OFF</p> 
<button>Toggle</button> 
</li> 
<li class="dashboard_item bedroom"> 
<h4>Bedroom</h4> 
<p>OFF</p> 
<button>Toggle</button> 
</li> 
<li class="dashboard_item bathroom"> 
<h4>Bathroom</h4> 
<p>OFF</p> 
<button>Toggle</button> 
</li> 
<li class="dashboard_item studyroom"> 
<h4>Studyroom</h4> 
<p>OFF</p> 
<button>Toggle</button> 
</li> 
<li class="dashboard_item hall"> 
<h4>Hall</h4> 
<p>OFF</p> 
<button>Toggle</button> 
</li> 
</ul> 
</body> 
</html>

Answers

you either use onclick event to trigger a function when the tag is clicked
or add an Event listener to the tag, this is how you can solve the problem in two ways, here.

it’s better here to use variables as a state to manage the current state of each item you have instead of relying on the text

checkout these resources:
https://www.w3schools.com/jsref/event_onclick.asp
https://www.w3schools.com/js/js_htmldom_eventlistener.asp

// use variables as state of each item you have
var livingRoomState = true;

function toggleKitchenLights() {
  var status = document.getElementById("kitchen-light").innerHTML;
  if (status === "OFF")
    document.getElementById("kitchen-light").innerHTML = "ON";
  else if (status === "ON")
      document.getElementById("kitchen-light").innerHTML = "OFF";
}

var el = document.getElementById("livingroom-btn");
el.addEventListener('click', function() {
      document.getElementById("livingroom-light").innerHTML = livingRoomState ? "ON" : "OFF";
      livingRoomState = !livingRoomState;
});

<!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">
      <li class="dashboard_item kitchen">
        <h4>Kitchen</h4>
        <p id="kitchen-light">OFF</p>
        <button onclick="toggleKitchenLights()">Toggle</button>
      </li>
      <li class="dashboard_item frontdoor">
        <h4>Front Door</h4>
        <p>CLOSED</p>
      </li>
      <li class="dashboard_item balconydoor">
        <h4>Balcony Door</h4>
        <p>CLOSED</p>
      </li>
      <li class="dashboard_item livingroom">
        <h4>Livingroom</h4>
        <p id="livingroom-light">OFF</p>
        <button id="livingroom-btn">Toggle</button>
      </li>
      <li class="dashboard_item bedroom">
        <h4>Bedroom</h4>
        <p>OFF</p>
        <button>Toggle</button>
      </li>
      <li class="dashboard_item bathroom">
        <h4>Bathroom</h4>
        <p>OFF</p>
        <button>Toggle</button>
      </li>
      <li class="dashboard_item studyroom">
        <h4>Studyroom</h4>
        <p>OFF</p>
        <button>Toggle</button>
      </li>
      <li class="dashboard_item hall">
        <h4>Hall</h4>
        <p>OFF</p>
        <button>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"> 
<li class="dashboard_item kitchen"> 
<h4>Kitchen</h4> 
<p>OFF</p> 
<button>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="./frontdoor.svg" width="50px" height="50px"   alt="">
<h4>Front Door</h4> 
<p>CLOSED</p> 
</li> 
</ol>
<li class="dashboard_item balconydoor"> 
<h4>Balcony Door</h4> 
<p>CLOSED</p> 
</li> 
<li class="dashboard_item livingroom"> 
<h4>Livingroom</h4> 
<p>OFF</p> 
<button>Toggle</button> 
</li> 
<li class="dashboard_item bedroom"> 
<h4>Bedroom</h4> 
<p>OFF</p> 
<button>Toggle</button> 
</li> 
<li class="dashboard_item bathroom"> 
<h4>Bathroom</h4> 
<p>OFF</p> 
<button>Toggle</button> 
</li> 
<li class="dashboard_item studyroom"> 
<h4>Studyroom</h4> 
<p>OFF</p> 
<button>Toggle</button> 
</li> 
<li class="dashboard_item hall"> 
<h4>Hall</h4> 
<p>OFF</p> 
<button>Toggle</button> 
</li> 
</ul> 
</body> 
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Toggle button to change image state – Html

Answers