I have written a JavaScript that is supposed to change my header image every three seconds. For some reason nothing happens when I’m opening my page.
Can anyone see what I’m doing wrong?
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="changeImage.js"></script>
<title>Mikael Mattsson</title>
</head>
<body>
<div class="header">
<img id="headerImg" src="images/header-image.png" alt="Header image" width="100%" hight="100%">
</div>
</body>
</html>
JavaScript:
var images = [];
images[0] = "images/header-image.png";
images[1] = "images/header-image2.png";
var x = 0;
function imageChanger(){
var img = document.getElementById("headerImg");
img.src = images[x];
x++;
if (x > images.length){
x = 0;
}
setTimeout("imageChanger()", 3000);
}
x > images.lengthshould bex >= images.length.setTimeout("imageChanger()", 3000);must be changed tosetTimeout(imageChanger, 3000);