0

Hello I'm trying getElementById to change text inside my html web page. below you can find my 1st attempt

<!DOCTYPE html>
<html>
<body>
<h2>Use JavaScript to Change Text</h2>
<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>
<p id="demo"></p>
<script>
    var net     = require('net');
    var sleep   = require('sleep');
    var element = document.getElementById("demo");
    element.innerHTML = "Hello JavaScript!";
</script>

This code doesn't work because I can see the:

Use JavaScript to Change Text

This example writes "Hello JavaScript!" into an HTML element with id="demo":

but the: "Hello JavaScript!" is missing.

Changing the positions of the vars at the beginning of the js script makes the code working:

<!DOCTYPE html>
<html>
<body>
<h2>Use JavaScript to Change Text</h2>
<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>
<p id="demo"></p>
<script>
    var element = document.getElementById("demo");
    element.innerHTML = "Hello JavaScript!";
    var net     = require('net');
    var sleep   = require('sleep');
</script>

Why? I need both sleep and net later on when I'll write other parts of the code but I need to manipulate again the "demo" html as well.

dzuliani
  • 111
  • 1
  • 1
  • 8

2 Answers2

1

There is a problem with both lines. The require() function is not a client side function, recognized by the browser. Typically require() is used in server side NodeJS code, but there is a require.js library file that you can add...

var net     = require('net');
var sleep   = require('sleep');

Add this to your project: http://requirejs.org/docs/release/2.2.0/minified/require.js

And take a look at this : http://requirejs.org/docs/api.html

Source : Javascript require() function giving ReferenceError: require is not defined

Laurent Mouchart
  • 216
  • 1
  • 3
  • 13
  • As I've written above I've found the problem was exactly in the lines yo've found too. Probably I'm making some mistakes. I've a verys simple js code: called test.js including two lines: var net = require('net'); var sleep = require('sleep'); The code run withou problems if launched with node test.js. If I put that code inside my html code it yelds problems. What do you think? – dzuliani Apr 24 '18 at 16:05
0

It seems likely that the lines with

var net     = require('net');
var sleep   = require('sleep');

are actually causing an error, which in turn causes the JS to stop evaluating, so that it doesn't hit the getElementById line. You can check this in you browser's developer tools, in the console.

niels
  • 1,719
  • 10
  • 20
  • Ok, using the brwser's developer tools I can see the error: ReferenceError: require is not defined But I think that's strange beacause I've written the following code inside a test.js: var net = require('net'); var sleep = require('sleep'); and it works when i run it with: node test.js – dzuliani Apr 24 '18 at 13:38
  • I don't do much node, but I think that `require` is specific to node, it's not an API that is supported by browsers (one of those things that make it hard to like Javascript, for me). You could have a look at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import or have a look at a tool like [webpack](https://webpack.js.org/), one of the many tools in the JS ecosystem that you can use to load dependencies in a browser. – niels Apr 25 '18 at 10:44
  • RequireJS is one of those many tools (as referenced by @Laurent Mouchart ) – niels Apr 25 '18 at 10:45