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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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))