How can an external Javascript file affect an HTML file's DOM?
Question
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.
5 answers
solution1
6 ACCPTED 2014-09-27 11:17:59
Your 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 .
solution2
4 2014-09-27 11:16:48
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.
solution3
1 2014-09-27 11:18:53
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>
solution4
0 2014-09-27 11:24:10
In three ways:
- Import js file after your content.
- Use window.onload = function(){ ... }
- document.addEventListener('DOMContentLoaded', function(){ ... }
So it can find the element.
solution5
-2 2014-09-27 12:14:25
If you need to execute the change after all elements are loaded, why not use a simple JQuery function.
$(document).ready (function (){ Document.getElementByID('tim').innerHTML = "changed text";
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.