Question 45435 in Html Question posted in
Some basic documentation can be found here.

Toggle button to change image state – Html

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0 
    <!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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search