javascript dynamically change the location of image src - NO JQuery

Question

I have several pages set up in the same way. Each page has about 10 to 15 images and if you click them, the image changes and becomes unclickable. The code I have for this is:

function ToggleOnclick(elID)
{
var el = document.getElementById(elID);
var loc = document.getElementsByClassName("wrapper");

if (el.onclick)
{
        // Disable the onclick
        el._onclick = el.onclick;
        el.onclick = null;
        el.src = loc.id + "/" + el.name + "Clicked.png";
}
}

The html for the images is:

  ....
  <div class="content">
   <div class="wrapper" id="som">
   <div class="img0"><img src="som/doos.png" alt="doos" name="doos" id="doos" onclick="ToggleOnclick(this.name);" /></div>
   <div class="img1"><img src="som/beer.png" alt="beer" name="beer" id="beer" onclick="ToggleOnclick(this.name);" /></div>
   <div class="img2"><img src="som/bel.png" alt="bel" name="bel" id="bel" onclick="ToggleOnclick(this.name);" /></div>
   ....

Because I need to make about 20 html-files, I had the notion to add the source location of the images as the id-tag of the wrapper-div.

I have little knowledge of javascript and I have a hard time finding what I'm looking for. Possibly also due to not being a native speaker and not knowing what I'm looking for exactly.

Please bear in mind that my files:

have to work in older browser versions due to the specs of our customers
can't be fixed with JQuery (Please don't go into that in comments or answers. I can't use it in this project. It's not up for discussion.)

tldr;I need a way to set the img src based on the id-tag of the wrapper-div

Code you have posted above seems fine, Where's the problem ?? — yogi
– yogi, Commented Aug 13, 2012 at 7:52
Whcih element has the onclick handler, .content? The only thing that I noticed is that you get all wrapper elements from the whole document. Did you mean el.getElementsByClassName? — Torsten Walter
– Torsten Walter, Commented Aug 13, 2012 at 7:56
@TorstenWalter the onClick is in the images, if you scroll right you'll see it called. And the wrapper is only used once, so that doesn't matter — silvith
– silvith, Commented Aug 13, 2012 at 8:08

Musa · Accepted Answer · 2012-08-13 18:57:21Z

1

getElementsByClassName gives a collection not a single element

pass the element to ToggleOnclick so you won't have to fetch it in the function

function ToggleOnclick(el)
{
//var loc = document.getElementsByClassName("wrapper")[0];//assuming there is only one wrapper
if (el.onclick)
{
        // Disable the onclick
        el._onclick = el.onclick;
        el.onclick = null;
        //el.src = loc.id + "/" + el.name + "Clicked.png";
        el.src = el.src.replace(".png", "Clicked.png");
}
}
<img src="som/doos.png" alt="doos" name="doos" id="doos" onclick="ToggleOnclick(this);" />

edited Aug 13, 2012 at 18:57

answered Aug 13, 2012 at 7:55

Musa

97.9k17 gold badges123 silver badges144 bronze badges

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

5 Comments

silvith Over a year ago

I tried with this: onclick="ToggleOnclick(this.name, "som");" and in the javascript function ToggleOnclick(elID, loc) and el.src = loc + "/" + el.name + "Clicked.png"; But that's not working

silvith Over a year ago

I'm sorry, I had to unaccept the answer. The browser support for getElementsByClassName is not sufficient and I need it to work in older browsers as well [link]caniuse.com/getelementsbyclassname

Musa Over a year ago

You could use getElementById('som')

silvith Over a year ago

No I can't because 'som' is the dynamic location. It would be 'juf' in one of the other excercises. I am toying with switching id and class for the wrapper-div. To me, it makes no difference if the css refers to an id or to a class in this case, because it's such a basic structure.

silvith Over a year ago

this solution is so simple it's brilliant :)

Collectives™ on Stack Overflow

javascript dynamically change the location of image src - NO JQuery

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related