Changing images onclick

I want the image to change when someone clicks on it, but this isn’t working.

<image id="s" src="s.jpg" onclick="reaction()" ></image>
    function reaction()
    {
    var replace=document.getElementById("s").src;
    replace="20141018_222702.jpg";
    }

Can someone explain me the reason?

Answer

Your code is not working because you use retrieved the value of src and placed it in a variable called replace like so:

var replace=document.getElementById("s").src;

After that you changed the content of the variable like so:

replace="20141018_222702.jpg";

All a variable does is hold a value. You just changed the value/content that the variable holds, which results in nothing happening.

What you should do is have the variable hold the element itself, like so:

var replace=document.getElementById("s");

Then have javascript change the src property/attribute of the element it holds, like so:

replace.src="20141018_222702.jpg";

I hope this clears out your doubts 🙂