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");
};
CodePudding user response:
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");
}
})