Why isn't the img src/picture changing after click?

Question

I am trying to perform a transition state from Transition State 1 to Transition State 2

The technology I am using to accomplish this JavaScript because JavaScript can dynamically "change the content of HTML elements" - JavaScript

Here is JFiddle

I saw that to change the src of an image tag in html, you have to execute this line of code (From Change Img Src)

document.getElementById("imageid").src="../template/save.png";

Here is my entire JavaScript code for the changing image portion(from my JFiddle)

(function() {
    alert("got here");
    function pageLoad() {   
        document.getElementById("choice1").onclick = getPicture("http://i.imgur.com/e95oMVZ.jpg");
        document.getElementById("choice2").onclick = getPicture("http://imgur.com/dOlZ19H");    
    }
    function getPicture(imageUrl) {
          document.getElementById("picture").src = imageUrl;
     }
    window.onload = pageLoad;
})();

I made sure I was follow conventions for JavaScript Arguments, checked over my ids, and coded an alert statement to make sure the JavaScript was being executed.

After all of that, when I click on choice2, the image still doesn't change... Does anyone know what the issue could be?

score 4 · Accepted Answer · answered May 07 '15 at 17:41

4

You need to set onclick to a function. You're calling the function immediately, not when the element is clicked.

function pageLoad() {   
    document.getElementById("choice1").onclick = function() {
        getPicture("http://i.imgur.com/e95oMVZ.jpg"); 
    };
    document.getElementById("choice2").onclick = function() { 
        getPicture("http://imgur.com/dOlZ19H"); 
    };
}

answered May 07 '15 at 17:41

Barmar

741,623
53
500
612

Can you explain this more? I see what you did there was create an anonymous function(wo a name). Why won't that be called immediately? Before I had a function attached to the .onclick property. Doesn't that tell the .onclick that that function needs to be called when item is clicked just like your anonymous function? – committedandroider May 07 '15 at 17:44
@committedandroider Because there's no trailing `()`. Your code *called* `getPicture` with an argument, so the `onclick` handler was the *return value of that function*, which is `undefined`. To make your code work sort-of "as-is" you'd need to *return* a function that captured the image URL. Note that the URL for `#choice2` isn't actually an image, though; it's the imgur page. – Dave Newton May 07 '15 at 17:47
@DaveNewton Ahh I see the ("http://imgur.com/dOlZ19H") in getPicture("http://imgur.com/dOlZ19H") will cause that function to get executed immediately. Because of that, when you load the page, shouldn't the image be the second image, not the guy on a laptop? – committedandroider May 07 '15 at 17:50
@committedandroider It's still not an image. But it sets the `onclick` handler to be `undefined`, so *nothing* happens when you click on it. – Dave Newton May 07 '15 at 17:51
Yes, when you load the page it should call `getPicture` twice, and the result should be that it sets it to the second image. Clicking on the image won't do anything. – Barmar May 07 '15 at 17:52
@Barmar Oh thanks. I updated my JFiddle to reflect what you taught me - http://jsfiddle.net/lasred/uggopbhk/24/ Do you know why the image still isn't changing? – committedandroider May 07 '15 at 17:56
Your Fiddle has "Onload" selected, so that code you put in the JS panel was being run by the `window.onload` handler. It was assigning `pageLoad` to the onload handler, but the onload handler had already run, so it never got called. See http://jsfiddle.net/barmar/uggopbhk/25/ where I changed to No Wrap, it works. – Barmar May 07 '15 at 19:25

Why isn't the img src/picture changing after click?

1 Answers1