Why wont the ../ file path work in css and html?-CodePudding

You see, whenever I try to use ../ in CSS or HTML, it doesn't appear to work, It just gives me this error: GET file:///C:/Users/MYUSERNAME/Desktop/Coin Clicker/source/coin.png net::ERR_FILE_NOT_FOUND even though I used ../images/. Keep in mind coin.png is in images, not source. However, if I do this in javascript, which is in a different file than the HTML file, it does appear to work. Any idea why this occurs? here is my code:
CSS:

#coin {
  background-image: url("../images/coin.png");
  border: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 200px 200px;
  background-color: white;
  border-radius: 50%;
  width: 200px;
  height: 200px;
}
#coin:active {
  background-image: url("../images/coin-pressed-in.png");
}

HTML:

<div>
  <span id="count">0¢</span>
</div>


  <button id="coin" alt="coin" onclick="plusOne()"></button>


<script src="script.js"></script>

javascript:

var dollar = 0;
var cents = 0;
var count = document.getElementById("count");

function plusOne() {
  if (cents < 95) {
    cents  =5;
    count.innerHTML = cents   " ¢";
  } else if (cents == 95) {
    dollar = 1;
    cents = 100;
    count.innerHTML = dollar   " $";
  } else if (dollar >= 1) {
    dollar  = 0.05;
    count.innerHTML = round(dollar, 2)   " $";
  }
}

function round(value, decimals) {
  return Number(Math.round(value 'e' decimals) 'e-' decimals);
}

document.getElementById("favicon").href = "coin.png";

document.addEventListener("visibilitychange", (event) => {
  if (document.visibilityState == "visible") {
    document.getElementById("favicon").href = "../images/coin.png";
  } else {
    document.getElementById("favicon").href = "../images/coin-disabled.png";
  }
});

File directory:

- images/  
    * coin.png  
    * coin-disabled.png  
    * coin-pressed-in.png  
- source/  
    * coin.html  
    * script.js

CodePudding user response：

It seems your root folder (The folder designated as the origin for your project is source). This is evidenced by the filenotfound error showcasing it is looking for the image in the source folder, not the images folder. You have a few options:

Move the images folder INSIDE the source folder Change the Project folder to Coin Clicker Move the images folder INSIDE the source folder AND make a separate folder for the html and js to keep them separated.

CodePudding user response：

The tag will be href = "/images/coin.png" or href = "images/coin.png".it will work.this will same as url tag like this url("images/coin.png").