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

Image change with toggle – Html

Been working on a home automation dashboard and I need some help. How do I get the image to change when the button is toggled ON and OFF. I have a sun svg for on and 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>


<!-- variable in js -->

var KitchenState = true;

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

Been trying examples online with no luck so far.

Tags:

3

Answers


  1. 0

    use .setAttribute or .src
    add id kitchen-icon to tag <img> icon

    and try code:

    
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;
})
    Login or Signup to reply.
  2. 0

    Give some id attribute to the image and then change it in the same way like you are changing the innerHTML. For image you just need to change the src 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="">
    Login or Signup to reply.
  3. 0

    From the point of view of your question, I think you need the following code

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

//Create a callback function for the click event of each button
for (let i = 0; i < btnAllLen; i++) {
  !(function(n) { // Register click events
    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search