Switching display with a toggle mechanism

Question

Switching display with a toggle mechanism

I've been experimenting with a home automation dashboard and I'm in need of some guidance. How can I make the image change when the button is toggled ON and OFF? I have a sun svg for ON and a moon svg for 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"> 
        <li class="dashboard_item frontdoor" > 
        <img src="./door-closed.svg" width="40px" height="40px" alt="">
        <h4>Front Door</h4>
        <p>CLOSED</p>
      </li>
    </ul>
  </body>
</html>

<!-- javascript variable declaration -->

var KitchenState = true;

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

I've attempted several online examples without success so far.

javascript html css

Answer 1

Answer №1

Make sure to assign an id attribute to the image and then manipulate it in a similar manner as you would change the innerHTML of an element. When dealing with images, simply adjust the src attribute accordingly.

<script>
    var KitchenState = true;

var el = document.getElementById("kitchen-btn");
el.addEventListener('click', function() {

      document.getElementById("kitchen-light").innerHTML = KitchenState ? "ON" : "OFF";
      document.getElementById('toggle-img').src = KitchenState ? './sun.svg' : './moon.svg'
     
      KitchenState = !KitchenState;
});
    </script>


 <img src="./moon.svg" width="40px" id="toggle-img" height="40px" alt="">

Answer 2

Make sure to assign an id attribute to the image and then manipulate it in a similar manner as you would change the innerHTML of an element. When dealing with images, simply adjust the src attribute accordingly.

<script>
    var KitchenState = true;

var el = document.getElementById("kitchen-btn");
el.addEventListener('click', function() {

      document.getElementById("kitchen-light").innerHTML = KitchenState ? "ON" : "OFF";
      document.getElementById('toggle-img').src = KitchenState ? './sun.svg' : './moon.svg'
     
      KitchenState = !KitchenState;
});
    </script>


 <img src="./moon.svg" width="40px" id="toggle-img" height="40px" alt="">

Answer 3

Answer №2

Use method .setAttribute or property .src Include id kitchen-icon to the <img> tag for icon

Here is a sample code snippet:


var KitchenState = true;

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

      document.getElementById('kitchen-icon').src = KitchenState ? './moon.svg' : './sun.svg'

      KitchenState = !KitchenState;
})

Answer 4

Use method .setAttribute or property .src Include id kitchen-icon to the <img> tag for icon

Here is a sample code snippet:


var KitchenState = true;

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

      document.getElementById('kitchen-icon').src = KitchenState ? './moon.svg' : './sun.svg'

      KitchenState = !KitchenState;
})

Answer 5

Answer №3

When considering your query, it appears that the code below might be of assistance

let btnAll = document.getElementByTagName('button')
let conAll = document.getElementByClassName('content')
let btnAllLen = btnAll.length

//Implementing a callback function for each button click event
for (let i = 0; i < btnAllLen; i++) {
  !(function(n) { // Setting up click event listeners
    btnAll[n].addEventListener('click', function() {
      for (let j = 0; j < btnAlllen; j++) {
        btn[j].className = ""
        conAll[j].style.display = "none"
      }
      this.className = "active"
      conAll[n].style.display = "block"
    })
  })(i)
}

.main {
  text-align: center;
}

button:focus {
  outline: none;
}

nav {
  margin-top: 30px;
  box-sizing: border-box;
}

button {
  background: white;
  border: none;
  height: 36px;
  line-height: 36px;
  width: 80px;
  text-align: center;
  border: 1px solid lightgray;
  border-radius: 4px;
  cursor: pointer;
}

nav>button:not(:first-child) {
  margin-left: 15px;
}

.active {
  background: black;
  color: white;
}

.content {
  margin-top: 40px;
}

.content>p {
  display: none;
}

<div class="main">
  <nav>
    <button class="active">content 1</button>
    <button>content 2</button>
    <button>content 3</button>
    <button>content 4</button>
  </nav>
  <div class="content">
    <p style="display: block;">content1</p>
    <p>content2</p>
    <p>content3</p>
    <p>content4</p>
  </div>
</div>

Answer 6

When considering your query, it appears that the code below might be of assistance

let btnAll = document.getElementByTagName('button')
let conAll = document.getElementByClassName('content')
let btnAllLen = btnAll.length

//Implementing a callback function for each button click event
for (let i = 0; i < btnAllLen; i++) {
  !(function(n) { // Setting up click event listeners
    btnAll[n].addEventListener('click', function() {
      for (let j = 0; j < btnAlllen; j++) {
        btn[j].className = ""
        conAll[j].style.display = "none"
      }
      this.className = "active"
      conAll[n].style.display = "block"
    })
  })(i)
}

.main {
  text-align: center;
}

button:focus {
  outline: none;
}

nav {
  margin-top: 30px;
  box-sizing: border-box;
}

button {
  background: white;
  border: none;
  height: 36px;
  line-height: 36px;
  width: 80px;
  text-align: center;
  border: 1px solid lightgray;
  border-radius: 4px;
  cursor: pointer;
}

nav>button:not(:first-child) {
  margin-left: 15px;
}

.active {
  background: black;
  color: white;
}

.content {
  margin-top: 40px;
}

.content>p {
  display: none;
}

<div class="main">
  <nav>
    <button class="active">content 1</button>
    <button>content 2</button>
    <button>content 3</button>
    <button>content 4</button>
  </nav>
  <div class="content">
    <p style="display: block;">content1</p>
    <p>content2</p>
    <p>content3</p>
    <p>content4</p>
  </div>
</div>

Switching display with a toggle mechanism

Answer №1

Answer №2

Answer №3

Similar questions

How to choose multiple checkboxes in AngularJS by utilizing the shift key and mouse click feature?

Tips on storing a blob (AJAX response) in a JSON file on your server, not on the user's computer

Adjusting the rotation transform by deleting and reapplying canvas is causing the chart to not display data after redrawing

The time.js library is providing inaccurate second values for the given date and time

Ways to ensure that a div, header, container, and other elements completely cover the viewport

Finding the difference between a PHP date and a JavaScript date

Retrieve JSON data using AngularJS

Importing events from the calendar causes disarray in other data columns when sorted by date

As soon as I execute this code, the Meta slider vanishes without a trace

Oh no! It seems like the build script is missing in the NPM

"How can I display validation errors for email and fax in each row of loop items using Angular? Specifically working with Angular 8

Element not being located by Selenium - TimeoutException

Guide to Using Bootstrap 4 for User Information: Best Practices and Steps to Follow

Guide to selecting a checkbox in Vue.js 2 based on a specific value?

Utilizing conditional statements like if/else and for loops within a switch statement in JavaScript allows for

Custom Homepage with Integrated Google Web Search and Autocomplete Feature

"Initiate an Ajax call in Full Calendar before an event is displayed on the calendar

Is there a way to extract variables from a MySQL database and integrate them into a JavaScript function?

Checkbox in Angular FormGroup not triggering touched state

Creating a reset or refresh button with JavaScript: Step-by-step guide