I am trying to change the image by hovering the mouse over the image through the javascript functions. It was working properly fine till yet. But lately when I hover the mouse over the image, the main image disappears that means the javascript code doesn't work somehow. I have debugged it on the browser and got to know about the error which I have mentioned above. I have tried to change the path of the image inside javascript and also tried to change the path of the javascript file. But it doesn't work for me. P.S. - I am working on an ASP.Net core mvc website So my javascript file is bound with the layout page.

Here is the code of the javascript functions which I use :

function SwitchOn() {
    pic = "../images/switchon.png";
    document.getElementById('headImg').src = pic;
}

function SwitchOff() {
    pic = "../images/logo.png";
    document.getElementById('headImg').src = pic;
}

These both functions exist in webvalidations.js file which is bound with the layout page.

This is how the image disappears and error looks like when I hover the mouse over it :

This is the way I use both the functions via event in the img tag :

<img src="~/images/logo.png" id="headImg" onmouseover="SwitchOn()" onmouseout="SwitchOff()" style="height:100px;width:100px;" />

P.S. Image only disappears when I hover over it.