0

I wrote a function in JS code, and I want to run it from HTML, but I don't see any reaction, when I run the site.

I will show you example of html code and js code.

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="test.js">
    <script src="test.js"></script>
</head>

<body onload="add()"> 
    
    <p id="add2"></p>
</body>

</html>

Here starts JS code

function add(a,b,c,d) {
  return a + b + c + d;
}

document.getElementById("add2").innerHTML = add(5,10,15,20);

I hope I wrote it clearly and someone will tell me, what did I do wrong?

Heretic Monkey
  • 10,498
  • 6
  • 45
  • 102
Kumos
  • 1
  • You call the function add on load. You want to trigger the code that updates the DOM onload. Something like `window.addEventListener('load', function () { document.getElementById("add2").innerHTML = add(5,10,15,20); });` – epascarello Jan 18 '21 at 18:18
  • Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Heretic Monkey Jan 18 '21 at 18:20
  • As a side point, your stylesheet link links to a js page. – Combobulated Jan 18 '21 at 18:54

3 Answers3

0

Your JavaScript code is in the head, which is before the body and everything else, so the JavaScript runs before the p element has been created (html is run line by line). To fix this issue, you can try putting the JavaScript at the end of the document, for example after body.

Combobulated
  • 128
  • 1
  • 12
0

When a browser loads an HTML page, it reads your HTML from top-to-bottom.

So ordering is important.

There are complexities of course. I'm not talking about deferred or asynchronous scripts here. But the top-to-bottom simplification helps us understand your problem.

Your script is inside test.js, so it will be loaded and run before [body] is ready.

But test.js has this line:

document.getElementById("add2").innerHTML = add(5,10,15,20);

This line is not inside a function, so the browser will try to run it immediately.

The call to add() will work because it has been declared in the file. But document.getElementById("add2") will not, because it is an instruction to access the following HTML in the [body]:

<p id="add2"></p>

But the [body] has not been "read" yet, so the JavaScript DOM API does not know about it.

However, you have partially solved the problem already using the onload attribute of the [body] tag. You've just used the wrong function with it.

That onload is an instruction to run a function after [body] has been completely read. So if you changed your document.getElementById line to be inside a function:

function runWhenBodyHasLoaded () {
  document.getElementById("add2").innerHTML = add(5,10,15,20); 
}

And told the [body] tag to run the function after everything has loaded:

<body onload="runWhenBodyHasLoaded()">

Then <p id="add2"></p> will be ready in time to access it with document.getElementById.

shuckster
  • 4,871
  • 2
  • 19
  • 19
0

Or with jQuery: https://jsfiddle.net/bdgu8s4h/1/

Also consider loading your JS at the end (of body)

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="test.css">
</head>

<body> 
    <p id="add2"></p>
    <script type="text/javascript" src="test.js"></script>
</body>

</html>

JS (jQuery):

$(document).ready(function() {
function add(a,b,c,d) {
    return a + b + c + d;
}
    $('#add2').html(add(5,10,15,20));
});

Hope this also helped, cheers

Ray
  • 113
  • 1
  • 12