Javascript Toggleable Function

July 30, 2022

I am currently making a function where if you click this div element, an svg element will show up inside the div by using the innerHTML but when you click on it again, that element will change to another svg, so basically, I want the function itself to be toggleable. How can I make it work?

var daynightSVG = `<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="M24,13V11H18.928a6.927,6.927,0,0,0-.438-1.621l4.392-2.557L21.876,5.094,17.482,7.652a7.077,7.077,0,0,0-1.142-1.14l2.55-4.385L17.162,1.121l-2.55,4.385A6.91,6.91,0,0,0,13,5.072V0H11V5.072A6.908,6.908,0,0,0,9.4,5.5L6.854,1.121,5.126,2.127,7.671,6.5A7.046,7.046,0,0,0,6.524,7.646L2.14,5.094,1.134,6.822,5.513,9.371A6.9,6.9,0,0,0,5.072,11H0v2H5.072a6.948,6.948,0,0,0,.438,1.622L1.141,17.165l1.006,1.729,4.372-2.546a7.028,7.028,0,0,0,1.13,1.131L5.1,21.865l1.729,1.006,2.548-4.382A6.912,6.912,0,0,0,11,18.928V24h2V18.928a6.918,6.918,0,0,0,1.638-.445l2.552,4.388,1.728-1.006L16.362,17.47a7.06,7.06,0,0,0,1.125-1.128l4.383,2.552,1-1.729-4.382-2.551A6.928,6.928,0,0,0,18.928,13Zm-7-1c-.21,6.608-9.791,6.606-10,0C7.21,5.392,16.791,5.394,17,12Z"/></svg>`;
var modeToggle = document.getElementById("modeToggle");
modeToggle.innerHTML = daynightSVG;

modeToggle.onclick = () => {
  daynightSVG = `<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="M14,24A12.013,12.013,0,0,1,2,12C1.847,3.044,12.031-2.985,19.791,1.509l1.553.862-1.543.88c-6.7,3.688-6.21,13.87.8,16.906l1.621.731-1.467,1.006A11.921,11.921,0,0,1,14,24ZM14,2A10.011,10.011,0,0,0,4,12c-.155,7.117,7.763,12.2,14.155,9.082a11.544,11.544,0,0,1-.876-18.521A9.745,9.745,0,0,0,14,2Z"/></svg>`;
  modeToggle.innerHTML = daynightSVG;
  document.body.classList.toggle("darkModeToggled");
};

>Solution :

You have to add an event listener on the button.

var daynightSVG = `<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="M24,13V11H18.928a6.927,6.927,0,0,0-.438-1.621l4.392-2.557L21.876,5.094,17.482,7.652a7.077,7.077,0,0,0-1.142-1.14l2.55-4.385L17.162,1.121l-2.55,4.385A6.91,6.91,0,0,0,13,5.072V0H11V5.072A6.908,6.908,0,0,0,9.4,5.5L6.854,1.121,5.126,2.127,7.671,6.5A7.046,7.046,0,0,0,6.524,7.646L2.14,5.094,1.134,6.822,5.513,9.371A6.9,6.9,0,0,0,5.072,11H0v2H5.072a6.948,6.948,0,0,0,.438,1.622L1.141,17.165l1.006,1.729,4.372-2.546a7.028,7.028,0,0,0,1.13,1.131L5.1,21.865l1.729,1.006,2.548-4.382A6.912,6.912,0,0,0,11,18.928V24h2V18.928a6.918,6.918,0,0,0,1.638-.445l2.552,4.388,1.728-1.006L16.362,17.47a7.06,7.06,0,0,0,1.125-1.128l4.383,2.552,1-1.729-4.382-2.551A6.928,6.928,0,0,0,18.928,13Zm-7-1c-.21,6.608-9.791,6.606-10,0C7.21,5.392,16.791,5.394,17,12Z"/></svg>`;
var modeToggle = document.getElementById("modeToggle");
modeToggle.innerHTML = daynightSVG;
var isDisplayDayNight=false

/*modeToggle.onclick = () => {
  modeToggle.innerHTML = daynightSVG;
  document.body.classList.toggle("darkModeToggled");
};*/

modeToggle.addEventListener("click",()=>{
    isDisplayDayNight=!isDisplayDayNight
    if(isDisplayDayNight){
        //in this if block you can control the display in any way JS  or CSS
        document.body.classList.toggle("darkModeToggled");
    }

})