problem with onclick SOLVED with our thanks in the final post.

[niche]

The small img has an onclick event in it, but won't click. I'll bet it's something simple, but I don't see it. Here's the link:http://www.savebop.com/test_120810.php

Edited August 10, 2012 by niche

[thescientist]

i would just set an id on the <img> element instead, i think value only applies to input elements. also, the logic for setting the display style values seemed a little off.http://jsfiddle.net/nJU4F/

[niche]

Thanks, but I need to target the id of the hidden div not the visible div. I need the onclick in the visible div to toggle the display property from off to on. I don't understand why the showDiv() function isn't listening.

Edited August 10, 2012 by niche

[thescientist]

my bad, I was reusing the id's. here's an optionhttp://jsfiddle.net/nJU4F/

[niche]

Turns out there's no value attribute for a div or img. I had to use data-value to get the target value in my function. In case you're interested, here's my solution (still needs a little positioning):http://www.savebop.com/test_120810c.php Thanks for your help thescientist.

[dsonesuk]

The new property to access data attribute is dataset, but as usual IE is still slow on the uptake so we still have to use getAttribute as backup.

function showDiv(elem) {var id_ref = elem.getAttribute("data-idref") || elem.dataset.idref;var divTest = document.getElementById(id_ref);if (divTest.style.display === "none") {   	 divTest.style.display = '';    } else if (divTest.style.display === '') {	      divTest.style.display = "none";        }               }

[niche]

Thanks donesuk. We always appreciate your help. I tried http://www.savebop.com/test_120810c.php on ie9 and it displayed as I expected. Are you referring to an older version of ie?

[dsonesuk]

ALL browsers will be able to use getAttribute, the new method is to use dataset but its not supported in IE, yeah! just relised its always going to use getAttribute try this instead

function showDiv(elem) {var id_ref;if(elem.dataset){id_ref =  elem.dataset.idref;}else{id_ref = elem.getAttribute("data-idref");}var divTest = document.getElementById(id_ref);if (divTest.style.display === "none") {        divTest.style.display = '';    } else if (divTest.style.display === '') {	      divTest.style.display = "none";         }              }

[niche]

Why did you change the argument in the showDiv() function ( http://www.savebop.com/test_120810c.php ) from:

function showDiv(value) {

to

function showDiv(elem) { 

???

Edited August 11, 2012 by niche

[dsonesuk]

Because it refers to the element on which onclick was triggered, not its value, just my way of making it more understandable an readable on what it is referring to. AS in with if(elem.dataset){id_ref = elem.dataset.idref;}else{id_ref = elem.getAttribute("data-idref");} you are looking at that specific elements attributes

Edited August 11, 2012 by dsonesuk

[niche]

I'm confused about elem as an argument. This is the element that triggered showDiv() in my #7 post in http://www.savebop.com/test_120810c.php.

echo '<button style="float:left;" class="button4"  onclick="showDiv(this.value)" value="relatedItems' . $counterz . '">Related Items</button>';

What do I need to do to redefine the showDiv() argument, in the element, to get the showDiv() function to start listening? The console says elem is undefined.

Edited August 11, 2012 by niche

[niche]

Dsonesuk: Based on http://www.savebop.c...est_120810c.php in post #7 was it the relatedItems(event) function you meant to modify instead of showDiv(value)? It's the relatedItems(event) that makes use of data-value.

Edited August 11, 2012 by niche

[dsonesuk]

I was going by your original example giving you a example on how to use dataset

function showDiv(elem) { var id_ref; if(elem.dataset){id_ref =  elem.dataset.idref;}else{id_ref = elem.getAttribute("data-idref");} var divTest = document.getElementById(id_ref); if (divTest.style.display === "none") {   	 divTest.style.display = '';	} else if (divTest.style.display === '') {		  divTest.style.display = "none";		}			  }

  <img onclick="showDiv(this)" data-idref="relatedItems2"" style="width:5%;" src="http://www.savebop.com/stk/lams/BATBOAT.JPG" alt="BATBOAT" /> <div id="relatedItems2" style="display:none;width:100%"> <img  src="http://www.savebop.com/stk/lams/BATBOAT.JPG" alt="BATBOAT" /> </div>

Edited August 11, 2012 by dsonesuk

[niche]

Confusion solved! Thanks, as always, Dsonesuk.