After changing seemingly nothing, a function that was working is now getting Failed to load resource: net::ERR_CONNECTION_REFUSED

Question

I have a function on my site which changes the image each time it is clicked on. Suddenly this stopped working and in the console I am getting this error when loading the page:

Failed to load resource: net::ERR_CONNECTION_REFUSED

and also this once clicking on an image

localhost:3002/pics/gymshark.png:1 GET http://localhost:3002/pics/gymshark.png net::ERR_CONNECTION_REFUSED

I reverted my commit back to an old one that I'm sure was working, but I am still getting this error. Any idea what could have changed? This function was working with both my local browser sync server as well as on my github pages version of the site.

Here's a look at the html and the js operating the function

html

<div id='gsk' class="col-lg-4 col-md-6 ">
  <img src="pics/gymshark.png" class='clothes' id='gsk-img' onclick="changeGymShark()" >
  <div class="title">The Gym Shark</div>
  <div class='price'>$45</div>
  <audio class="gymshark" src="music/backroad.mp3" controls></audio>
</div>

js

function changeGymShark(){
    console.log(document.getElementById("gsk-img").src)
    if (document.getElementById("gsk-img").src == "http://localhost:3002/pics/gymshark.png") {
        document.getElementById("gsk-img").src = "http://localhost:3002/pics/gymshark-back.png"
    }
    else {
        document.getElementById("gsk-img").src = "http://localhost:3002/pics/gymshark.png"
    }
}

Thank you for any help.

Answer 1

Is it still working for you locally?

It looks like the problem is in your getGymShark() function since your site on github is still trying to access the localhost domain, which won't work on the hosted site. Try editing it to use the relative path of the images on the server:

function changeGymShark(){
    console.log(document.getElementById("gsk-img").src)
    if (document.getElementById("gsk-img").src == "/domestic-accessories/pics/gymshark.png") {
        document.getElementById("gsk-img").src = "/domestic-accessories/pics/gymshark-back.png"
    }
    else {
        document.getElementById("gsk-img").src = "/domestic-accessories/pics/gymshark.png"
    }
}