Simple javascript change image not working

Question

I want to change an image's src on click of a link. I got a javascript snippet and tried to integrate it but it doesn't work.Im

Here's my HTML:

<html>
<head>
<meta charset="utf-8">

<link href="styles/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="styles/script.js"></script>
  <img id="bgimage" src="images/1.jpg"/>

  <nav id="nav"><a href="" onclick="changeImage()">A</a> | B |
  </nav>

</body>
</html>

Here is my script.js:

var imageId = document.getElementById("bgimage");
    function changeImage() {

        if (imageId.src == "images/1.jpg") 
        {
            imageId.setAttribute("src","images/2.jpg");
        }
        else 
        {
            imageId.setAttribute("Src","images/1.jpg");
        }
    }

Any reason your not using jquery? I would make my answer a lot cleaner. — wesleywmd
– wesleywmd, Commented Mar 9, 2014 at 3:20
im just learning html and css, this is for my project and we're not allowed to use other language.. — dgzz
– dgzz, Commented Mar 9, 2014 at 3:23
Jquery is a javascript package. But I guess that falls into a grey area if this is for a project. — wesleywmd
– wesleywmd, Commented Mar 9, 2014 at 3:39

markasoftware · Accepted Answer · 2014-03-09 03:41:21Z

This issue is occurring because the script appears in the html before the <img> element. Therefore, the code tries to find the img element, but it can't because the js code executes before the rest of the html is parsed. Correct it by putting the js include tag just before </body>:

<html>
<head>
<meta charset="utf-8">

<link href="styles/main.css" rel="stylesheet" type="text/css">
</head>
<body>
  <img id="bgimage" src="images/1.jpg"/>

  <nav id="nav"><a href="" onclick="changeImage()">A</a> | B |
  </nav>

<script src="styles/script.js"></script>

</body>
</html>

Or, you might want to use DOMContentLoaded to wait until the html has been parsed. Change the js to this, in that case:

var changeImage;
document.addEventListener('DOMContentLoaded',function(){
var imageId = document.getElementById("bgimage");
changeImage=function() {

    if (imageId.src == "images/1.jpg") 
    {
        imageId.setAttribute("src","images/2.jpg");
    }
    else 
    {
        imageId.setAttribute("Src","images/1.jpg");
    }
}
},false);

Or you could call document.getElementById() every time changeImage is called

Oriol · Accepted Answer · 2014-03-09 03:45:54Z

1

You must place your script just before </body>, or run it at onload.

If not, you run

var imageId = document.getElementById("bgimage");

before loading the image to the DOM, so imageId is null.

Anyway, you could improve your function to

var images = ["images/1.jpg", "images/2.jpg" /*, ... */];
function changeImage() {
    imageId.src = images[(images.indexOf(imageId.src)+1) % images.length];
}

edited Mar 9, 2014 at 3:45

answered Mar 9, 2014 at 3:40

Oriol

291k71 gold badges459 silver badges535 bronze badges

Collectives™ on Stack Overflow

Simple javascript change image not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related