Why is the script not updating the contents of the element?

Question

I have done this before in other environments and it worked so I suspect it's an environment problem. See link: https://replit.com/@MargaretGuzman/Demo#script.js

I expected the script to update the contents of the element to "hi".

const box = document.getElementById("demo");
box.innerText = "hi";

html, body {
  height: 100%;
  width: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="demo">before</div>
</body>

</html>

If you were to insert it here 1:1:1. You would see it does work, it must be something else — Akxe, Jan 24 '23 at 23:18
well do you have to add a script tag since there is tag for the stylesheet? — epascarello, Jan 24 '23 at 23:21
@MargaretGuzman _“There is a script tag”_ — Where is it? Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`), read any errors. The dev tools provide an **Inspector** / **Elements** tab. Inspect your elements. Do you see the ` — Sebastian Simon, Jan 24 '23 at 23:25
The dev tools provide a **Debugger** tab. Can you find your JS source there? If not, then your JavaScript has not been loaded. [Validate your HTML](//validator.nu). The JS code by itself works. — Sebastian Simon, Jan 24 '23 at 23:26
Please update your code snippet, here on SO, by adding this script tag — Mister Jojo, Jan 24 '23 at 23:33
your script tag is wrong, you farget to use the defer directive : `` see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer — Mister Jojo, Jan 24 '23 at 23:37
To be more specific, we need a [mre]. A [complete](//developer.mozilla.org/en/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure), [valid](//validator.nu) HTML document with all the debugging details mentioned in the comments covered, and an exact description of what you did on Replit. — Sebastian Simon, Jan 24 '23 at 23:37
Still does not run with the script tag. I don't know how to update the code snippet but I have updated the repl. — Margaret Guzman, Jan 24 '23 at 23:38
@MargaretGuzman _“I don't know how to update the code snippet”_ — See [How do I format my code blocks?](//meta.stackoverflow.com/q/251361/4642212) and [How to create Stack Snippets](//meta.stackoverflow.com/q/358992/4642212). — Sebastian Simon, Jan 24 '23 at 23:39
@SebastianSimon - The network tab shows the script being found and run successfully. The request URL contains a code of random characters but does end in id.repl.co/script.js — Margaret Guzman, Jan 24 '23 at 23:46

JCollier · Answer 1 · 2023-01-24T23:38:20.573

0

As the last child of your <body> element in the HTML, you need a <script> element to connect your JavaScript file so that it executes on page load.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="demo"></div>
  <script src="script.js"></script>
</body>

</html>

I forked your Replit and my modified code works, however, you can also connect your JS to HTML without doing it exactly the way I did it. There's more than one way to skin a potato.

Others noticed that your code actually worked in the Stackoverflow environment, which I also confirmed, but typically, using the traditional HTML/JS setup, you need to manually connect your JS to your HTML.

edited Jan 24 '23 at 23:38

answered Jan 24 '23 at 23:23

JCollier

1,102
2
19
31

_“you need a ` – Sebastian Simon Jan 24 '23 at 23:34
Alright, I've changed "this code works" to "my modified code works", to make it more clear what I'm saying. – JCollier Jan 24 '23 at 23:39

score -1 · Answer 2 · answered Jan 24 '23 at 23:23

you should import the javascript file to the html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="demo"></div>
  =>>> <script src="./script.js"></script> <<<=
</body>

</html>

Why is the script not updating the contents of the element?

2 Answers2