How i can switch between icons with javascript when clicked?

Question

How can I switch between icons with javascript when clicked?

 function mode() { var moon = document.getElementById("mode"); moon.src = "https://img.icons8.com/sf-black-filled/35/fffffe/moon-symbol.png"; moon.id = "lightmode"; moon.onclick = lightmode(); } function lightmode() { var sun = document.getElementById("lightmode"); sun.src = "https://img.icons8.com/sf-black-filled/34/000000/sun.png"; sun.onclick = mode(); }

 body { background-color:grey }

 <div class="nav-icons"> <img id="mode" class="moon" onclick="mode()" src="https://img.icons8.com/sf-black-filled/35/fffffe/moon-symbol.png"> <img id="notification" src="https://img.icons8.com/ios-glyphs/34/fffffe/notification-center.png" alt="" srcset=""> </div>

Answer 1

You are setting up event listeners in an incorrect manner

Here is a toggle using classes and data attributes

 const srcs = { "dark": "https://img.icons8.com/sf-black-filled/35/fffffe/moon-symbol.png", "light": "https://img.icons8.com/sf-black-filled/34/000000/sun.png" }; const modeToggle = document.getElementById("modeToggle"); modeToggle.addEventListener("click", function() { let mode = this.dataset.mode; mode = mode === "dark"? "light": "dark"; // toggle this.src = srcs[mode]; // image this.dataset.mode = mode; // save in element document.body.classList.toggle("dark",mode==="dark"); // toggle page too }) document.body.classList.toggle("dark",modeToggle.dataset.mode==="dark"); // initialise the page, possibly from localStorage

 body { background-color: grey } body.dark { background-color: black; }

 <div class="nav-icons"> <img id="modeToggle" data-mode="light" src="https://img.icons8.com/sf-black-filled/34/000000/sun.png"> <img id="notification" src="https://img.icons8.com/ios-glyphs/34/fffffe/notification-center.png" alt="" srcset=""> </div>

Answer 2

this may solve your problem, please use proper names for your functions, eg instead of mode() use changeMode() as a name

javascript:

let isChanged = false;
let mode = document.querySelector('#mode');

function changeMode(){
  isChanged = !isChanged;
  if(isChanged) {
    mode.src = "https://img.icon8.com/sf-black-filled/35/ffffffe/moon-symbol.png"
  } else {
    mode.src = "https://img.icon8.com/sf-black-filled/34/000000/sun.png"
  }
}

Answer 3

Toggling between two different images/icons/styles is very simple in Javascript. You could, for instance, create a simple Object literal with name/value pairs for both icons as per the following. A simple ternary operator determines what the src should be based upon the current src

 document.querySelector('.nav-icons > img.sunmoon').addEventListener('click',function(e){ let icons={ sun:'https://img.icons8.com/sf-black-filled/34/000000/sun.png', moon:'https://img.icons8.com/sf-black-filled/35/fffffe/moon-symbol.png' }; this.src = this.src==icons.moon? icons.sun: icons.moon; });

 body { background-color: grey }

 <div class="nav-icons"> <img class="sunmoon" src="https://img.icons8.com/sf-black-filled/35/fffffe/moon-symbol.png" /> <img id="notification" src="https://img.icons8.com/ios-glyphs/34/fffffe/notification-center.png" alt="" srcset="" /> </div>