CODEWITHSUNDEEP
javascripthtmlcss
Steel
Steel

Reputation: 517

web project not functioning correctly in Visual Studio live server

I have the following html/css/javascript files in a Visual Studio folder. I am trying to change my div element with id = "top" to "Text change" instead of "top". As you can see, it is functioning correctly in the code snippet, but when I run my html file with the live server extension in Visual Studio, the javascript fails to make a change. I believe I am linking my css and javascript correctly to my html file. What is wrong here?

document.getElementById("top").innerHTML = "Text change";
#top {
  text-align: center;
  color: green;
}

#middle {
  text-align: center;
  color: blue;
  margin-top: 500px;
}

#bottom {
  text-align: center;
  color: red;
  margin-top: 1000px;
}
<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <script src="javascript-test.js"></script>

  <div id="top">top</div>
  <div id="middle">middle</div>
  <div id="bottom">bottom</div>
</body>

Upvotes: 0

Views: 73

Answers (2)

Will
Will

Reputation: 29

Try putting the <script>tag in the <head> to make the javascript run first.

<head>
  <link rel="stylesheet" href="style.css">
  <script src="javascript-test.js"></script>
</head>

Upvotes: 1

Jack Bashford
Jack Bashford

Reputation: 44107

Your JavaScript is running before your HTML loads. Move the <script> tag to the bottom of your page, just before your closing </body> tag:

  <script src="javascript-test.js"></script>
</body>

Upvotes: 1

Related Questions