Say we have this code for our HTML file:
<html>
<head>
<script src="totti.js"></script>
</head>
<body>
<span id="tim">this'll change on load</span>
</body>
</html>
And since I don't know how exactly I can do this, this is the code I want to implement (eg. totti.js):
function changeText(){
document.getElementById("tim").innerHTML = "changed text";
}
changeText();
I suppose we need to define its id into a variable first, or pass in it as an arguement in the HTML side? Help would be appreciated. Thanks.
Say we have this code for our HTML file:
<html>
<head>
<script src="totti.js"></script>
</head>
<body>
<span id="tim">this'll change on load</span>
</body>
</html>
And since I don't know how exactly I can do this, this is the code I want to implement (eg. totti.js):
function changeText(){
document.getElementById("tim").innerHTML = "changed text";
}
changeText();
I suppose we need to define its id into a variable first, or pass in it as an arguement in the HTML side? Help would be appreciated. Thanks.
Share Improve this question asked Sep 27, 2014 at 11:11 kittenparrykittenparry 1491 gold badge3 silver badges11 bronze badges 1- It is not clear what your question is. Is it a general question about how javascript works? You've essentially answered it yourself... the browser loads an HTML page and a javascript file; if the browser has a javascript interpreter (as almost all browsers do), it runs the code in the script file. The script will usually have a declaration to tell the browser when to run the script, e.g. when the page is loaded, when the DOM is ready, etc. – i alarmed alien Commented Sep 27, 2014 at 11:21
5 Answers
Reset to default 7Your code is correct, however, if you put the script inside the head tag, then the script will be executed before the document is loaded and thus it will not work (the element with the id tim does not yet exist at that point).
To fix this, you can either put the script tag after the element you want to modify (or at the bottom of the body tag) like this:
<html>
<head>
</head>
<body>
<span id="tim">this'll change on load</span>
<script src="totti.js"></script>
</body>
</html>
Or you can make the function run once the document loads, like this:
<html>
<head>
<script src="totti.js"></script>
</head>
<body onload="changeText()">
<span id="tim">this'll change on load</span>
</body>
</html>
In this case, remove the changeText() line from totti.js.
You're almost there, this is the correct approach. However, your Javascript is loaded and executed before the "tim" element is rendered, so it can't find it.
Wrap your code in an event that is fired once all DOM elements are loaded:
document.addEventListener('DOMContentLoaded', function(){
changeText();
});
function changeText(){
document.getElementById("tim").innerHTML = "changed text";
}
Note that the function itself is not inside the event callback, so it's registered right when the javascript loads. Only actually calling the changeText() function depends on the DOM.
The problem:
You're accessing a dom element with document.getElementById("tim") before the element is even created.
There are two possible ways of solving your problem:
1. Moving the script-tag to the end of the body-tag:
<html>
<head>
</head>
<body>
<span id="tim">this'll change on load</span>
<script src="totti.js"></script>
</body>
</html>
2. Using onload:
<html>
<head>
<script src="totti.js"></script>
</head>
<body onload="changeText()">
<span id="tim">this'll change on load</span>
</body>
</html>
In three ways:
- Import js file after your content.
- Use window.onload = function(){ ... }
- document.addEventListener('DOMContentLoaded', function(){ ... }
So it can find the element.
If you need to execute the change after all elements are loaded, why not use a simple JQuery function.
$(document).ready(function () {
$('#tim').html("changed text");
});