0

I am a real newbie in coding so my question will be rather basic for you guys. I am practicing some tutorials on html/css/js. I think I understand the concept to modify the html of the page using .js file linked to the .html page. I tried in codepen and that's working fine.

However when I try to launch my html file in the browser from the html file which is located in my desktop, well, my html page is not modified. My html file and js file are both on the Desktop, so same path.

Below the code I am using:

<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Mon titre on sen fout</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="test.js"></script> 
</head>
<body> 
  <h1> Title </h1>
<p> This is a text to be replaced </p>
</body>

and for the content of the test.js file:

let text = document.querySelector("p");
text.innerHTML = "<p>New Text</p>";

I am guessing that maybe the OS is blocking the .js to be executed ? Is there anyway to do make it work ?

Thank you

AlexGZ888
  • 11
  • 2

1 Answers1

1

Script tag should be declared just before the body closing tag so it will have access to HTML elements that were loaded before it.

let text = document.querySelector("p");
text.innerHTML = "New Text";
<!DOCTYPE html>
<html lang="fr">

<head>
  <title>Mon titre on sen fout</title>
  <link rel="stylesheet" href="style.css" />
  <style>
  body{
  background: #121212;
  color: white;
  }
  </style>
</head>

<body>
  <h1> Title </h1>
  <p> This is a text to be replaced </p>
  <script type="text/javascript" src="test.js"></script>
</body>
Lucjan Grzesik
  • 739
  • 5
  • 17