Press the toggle button to switch the image display

Question

Press the toggle button to switch the image display

Currently learning HTML and attempting to design a dashboard. I want to display the status (ON, OFF, OPEN, or CLOSED) of a room or door using an icon.

I have images for open/close doors and lightbulbs. Need assistance in adding an element to all the existing "li" elements.

Have tried watching tutorials, but they were too complex for me to understand.

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

javascript html css

Answer 1

Answer №1

One way to address this issue is by utilizing the onclick event to activate a function when the tag is clicked. Alternatively, you can attach an Event listener to the tag for a different approach.

It is advisable to employ variables as a state to effectively manage the current status of each item instead of relying solely on the text.

For more information, consider exploring the following resources: https://www.w3schools.com/jsref/event_onclick.asp https://www.w3schools.com/js/js_htmldom_eventlistener.asp

// Utilize variables as the state of each item
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>

Answer 2

One way to address this issue is by utilizing the onclick event to activate a function when the tag is clicked. Alternatively, you can attach an Event listener to the tag for a different approach.

It is advisable to employ variables as a state to effectively manage the current status of each item instead of relying solely on the text.

For more information, consider exploring the following resources: https://www.w3schools.com/jsref/event_onclick.asp https://www.w3schools.com/js/js_htmldom_eventlistener.asp

// Utilize variables as the state of each item
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>

Answer 3

Answer №2

<!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>Home Control Panel</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>Smart Home Control Panel</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>

Answer 4

<!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>Home Control Panel</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>Smart Home Control Panel</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>

Press the toggle button to switch the image display

Answer №1

Answer №2

Similar questions

javax.el.MethodNotFoundException: JSP method cannot be located

Passing a Ruby session variable to a JavaScript tag: a step-by-step guide

Add unique styles to a jQuery-included HTML document

Identifying a specific field in a dynamically generated React.js component: Best practices

Addon for Firefox: Image Upload

Searching for related values in a nested array of objects using JavaScript: A guide

Error message: Vue warning - The prop "disabled" must be a boolean type, but a function was provided instead

Ways to address the issue of "$ is not a function"

Using jQuery to compare input with the current select optgroup choices

Issue with Bootstrap navigation bar not displaying on iPad devices

Design a CSS floating div with a captivating bubble effect

How do I find out the properties of individual components in Material UI?

Making modifications to the database will trigger real-time updates in the web interface. How is it possible to achieve this seamlessly?

NodeJS: Retrieve Over 10,000 Images From the Server

Having trouble implementing an onClick event to change a button's CSS to href in Vue.js

Strategies for concealing and revealing content within dynamically loaded AJAX data

Bug in canvas rendering for Chrome versions 94 and 95

Code for retrieving information; some data may not be retrieved

How can you use Knex to order the results for each WHERE clause in a SELECT query?

How to trigger a jQuery function once a v-for loop has completed in VueJS?