Question

Can anybody give me the syntax on how could I determine where the onclick event was called.

I want to change the h4 content depending on where the onclick came from

For example:

• if label() is called in "woven badges" , h4 innerhtml will be "woven badges"
• if label() is called in "woven tapes" , h4 innerhtml will be "woven tapes"

I want to incorporate this into just one function and not to actually create one function per category which I’m currently doing with my JavaScript below. How can create it into if conditions?

function label()
{   document.getElementsByTagName("h4")[0].innerHTML="badges";}


<ul class="overview">

<li><img src="images/UniwinNav.jpg" align="texttop"/><a href=""><div class="listlabel">Woven Labels</div></a></li>

<li><img src="images/UniwinNav.jpg" align="texttop"/><a href="#" onClick='label()'><div class="listlabel">Woven Badges</div></a></li>

<li><img src="images/UniwinNav.jpg" align="texttop"/><a href=""><div class="listlabel">Woven Tapes</div></a></li>
<li><img src="images/UniwinNav.jpg" align="texttop"/><a href=""><div class="listlabel">Woven WaistBands</div></a></li>


<h4>Product Specification</h4>

</ul>

Answer 1

Just pass this as an argument to the label() function. It is a reference to the element that initiated the event. You can then easily find the string you want by grabbing the inner HTML of the first child element.

<script type="text/javascript">
function label(element) {
    document.getElementsByTagName("h4")[0].innerHTML=element.firstChild.innerHTML;
    return false;
}
</script>

<ul class="overview">

<li><img src="images/UniwinNav.jpg" align="texttop" /><a href="#" onclick="return label(this)"><div class="listlabel">Woven Labels</div></a></li>
<li><img src="images/UniwinNav.jpg" align="texttop" /><a href="#" onclick="return label(this)"><div class="listlabel">Woven Badges</div></a></li>
<li><img src="images/UniwinNav.jpg" align="texttop" /><a href="#" onclick="return label(this)"><div class="listlabel">Woven Tapes</div></a></li>
<li><img src="images/UniwinNav.jpg" align="texttop" /><a href="#" onclick="return label(this)"><div class="listlabel">Woven WaistBands</div></a></li>

<h4>Product Specification</h4>

Note that it is a good idea to add a return value to the label() function and return it when the element is clicked. This will cancel the default browser action, meaning you don’t get that pesky # character in your location.