Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How do i switch the button icon from nightmode to day mode?

So in the below code i have linked some js/jquery to elements in my html which should be self explanatory. I have console logged each if else statement to see what the issue is and it seems to be stuck on the first if statement.

function toggleDisplay() {
var icon = document.getElementById("togglebutton");
var night_icon = 'assets/Feed_Toggle_Night.png'
var day_icon = 'assets/Feed_Toggle_Day.png'
$("displaytog").on("click", () => {
    if (icon.src == night_icon) {
        icon.src = day_icon;
        console.log("success1");
    }else {
        icon.src = night_icon;
        console.log("success2");
    }
})
}
toggleDisplay();
<displaytog>
  <img src="assets/Feed_Toggle_Night.png" id="togglebutton"/>
</displaytog>

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

You are assigning icon.src to night_icon by accident. change your condition to check if they include any of your paths. the reason you need to use includes is because the src is a full path while your conditions are using relative paths. The src looks like this – "https://fiddle.jshell.net/_display/assets/Feed_Toggle_Day.png"

 if (icon.src.includes(night_icon))
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading