0

I checked all the files if their names does not match but I find no problems at all. While I am trying to solve this i came across a video. He write 'defer' between the script tag and I tried to do so too and it worked. But I have no idea why. If someone can explain me why my js not worked before and work after the defer, I would be really appreciated. Here are my html and js codes: This one's js is working because it has defer in script tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Color Flipper || Simple</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="app.js" defer></script>
  </head>
  <body>
    <nav>
      <div class="nac-center">
        <h4>Color Flipper</h4>
        <ul>
          <li><a href="index.html">simple</a></li>
          <li><a href="hex.html">hex</a></li>
        </ul>
      </div>
    </nav>
    <main>
      <div class="container">
        <h2>Background color : <span class="color"> #f1f5f8 </span></h2>
        <button class="btn btn-hero" id="btn">Click Me</button>
      </div>
    </main>
  </body>
</html>

This one's js does not work because theres no defer in script tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Color Flipper || Simple</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="app.js" ></script>
  </head>
  <body>
    <nav>
      <div class="nac-center">
        <h4>Color Flipper</h4>
        <ul>
          <li><a href="index.html">simple</a></li>
          <li><a href="hex.html">hex</a></li>
        </ul>
      </div>
    </nav>
    <main>
      <div class="container">
        <h2>Background color : <span class="color"> #f1f5f8 </span></h2>
        <button class="btn btn-hero" id="btn">Click Me</button>
      </div>
    </main>
  </body>
</html>

const colors = ["green", "red", "rgba(133,122,200)", "#f15025"];
const btn = document.getElementById("btn");
const color = document.querySelector(".color");

// background color changer
btn.addEventListener("click", function () {
  // get random number between 0 and 3 because we got an array that has 4 items
  const randomNumber = 2;
  document.body.style.backgroundColor = colors[randomNumber];
  color.textContent = colors[randomNumber];
});

Image: My files' names

PS: I am a beginner so if my question is silly, dont go hard on me please :)

Ali Bayraktar
  • 1
  • Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. Read the [documentation](//developer.mozilla.org/docs/Learn/JavaScript/First_steps/What_is_JavaScript#external_javascript). – Sebastian Simon Aug 23 '21 at 12:32
  • Have you tried to change the `js tag` to the end of your `body tag`, just before it closes? Like this `

    `

     – SIMBIOSIS surl Aug 23 '21 at 12:34
  • @SIMBIOSIS It worked thank you but I still wonder about why though. – Ali Bayraktar Aug 23 '21 at 12:38
  • It's simple. Study the way in which a web page is loaded. If you place your js tag at the begining, any of the objects, variables which it reference to are still not loaded, so it fails. But if you place it at the end of the body then it can handdle it all as the browser already loaded the whole page. – SIMBIOSIS surl Aug 23 '21 at 12:47
  • no way, we are here to help! Happy coding! – SIMBIOSIS surl Aug 23 '21 at 12:55

0 Answers0