Changing multiple images on JavaScript

Question

<!DOCTYPE html>
<html>
<head>
<script>
position=0;
var tLight = ["red light.gif","red_and_amber_light.gif","green                  light.gif","amber light.gif"]

function changeImage() {
if (position==0) {
document.getElementById('myImage').innerHTML=tLight[1]
position=1;
}    
else if (position==1) {
document.getElementById('myImage').innerHTML=tLight[2]
position=2;
}    
else if (position==2) {
document.getElementById('myImage').innerHTML=tLight[3]
position=3;
}       
else if (position==3) {
document.getElementById('myImage').innerHTML=tLight[4]
position=4;
}       

}
</script>
</head>
<body>
<img id="myImage" src="red light.gif" width="100" height="180">
<button type="button"
onclick="changeImage()">click for da lite</button>
</body>
</html>

I cant seem to find the problem in this code and i don't know whether it is me being blind or.....? someone please help. I have looked at the chrome "Developer Tools" but this cant detect any issues.

Also, setting the innerHTML of an image ,doesn't change the src attribute ? — adeneo
– adeneo, Commented Jan 22, 2016 at 14:59
no i have tried this in another document but it doesn't make any difference. Thanks though — Reix
– Reix, Commented Jan 22, 2016 at 15:00

jcubic · Accepted Answer · 2016-01-22 15:18:15Z

1

You are using "innerHTML" to "img" tag, you have to use "src" attribute to make it work:

document.getElementById('myImage').src = tLight[1]

edited Jan 22, 2016 at 15:18

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

answered Jan 22, 2016 at 15:00

Naqash Malik

1,8261 gold badge13 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Changing multiple images on JavaScript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related