use external javascript in html [basic stuff]

Question

I'm new to javascript and I wrote a simple code to change some words inside an h1 tag. Here are my HTML and JavaScript files:

var element;
var words = ["Cute","Nice","Playful"];
var current = 0;
function increment () {
	current++;
	if (current === words.length) {
		current = 0;
	}
	setTimeout('changeWord()', 1000);
}

function changeWord () {
	element.innerHTML = words[current];
	setTimeout('increment()', 2000);
}

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<script type="text/javascript" href="script.js"></script>
</head>
<body>
<h1>This dog is <span id="atribute"></span></h1>
<script type="text/javascript" href="script.js">
	element = document.getElementById("atribute");
	changeWord();
</script>
</body>
</html>

The problem is that this thing doesn't work. If I move the JS into a script tag inside the HTML document, it does work. So, how can I use that external JS document?

Wahid Masud · Accepted Answer · 2016-02-14 10:05:45Z

When you specify a script file then you have to use 'src' as the source attribute. Besides in your 2nd script below the html you dont need to specify the source because it is considered as internal script. So remove it's source attribute. And your fresh code will be:

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>This dog is <span id="atribute"></span></h1>
<script type="text/javascript">
    element = document.getElementById("atribute");
    changeWord();
</script>
</body>
</html>

JavaScript:

var element;
var words = ["Cute","Nice","Playful"];
var current = 0;
function increment () {
    current++;
    if (current === words.length) {
        current = 0;
    }
    setTimeout('changeWord()', 1000);
}

function changeWord () {
    element.innerHTML = words[current];
    setTimeout('increment()', 2000);
}// JavaScript Document

Collectives™ on Stack Overflow

use external javascript in html [basic stuff]

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related