How to get where onclick function is called JavaScript

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.

Answer 2

Just add parameter in function label :

label(type)

And in your html define type :

 <a href="#" onClick="label('badges')">Woven Badges</a>
 <a href="#" onClick="label('tapes')">Woven tapes</a>

And in your function label, do the treatment for each type.

PS : You should not add 'div' element in 'a' element

Answer 3

You have a context - this - in any event handler. Its bound to the element associated to the event. So you can do smth like this:

function my_handler(elem) {
  elem.href // contains href of anchor, eg '#Woven_WaistBands'
}

<li><img src="images/UniwinNav.jpg" align="texttop"/><a href="#Woven_Tapes" onclick="my_handler(this); return false;"><span class="listlabel">Woven Tapes</span></a></li>
<li><img src="images/UniwinNav.jpg" align="texttop"/><a href="#Woven_WaistBands" onclick="my_handler(this); return false;"><span class="listlabel">Woven WaistBands</span></a></li>

<h4 id="Woven_Tapes">blah blah</h4>
<h4 id="Woven_WaistBands">...</h4>

But it is better not to repeat your self and bind handlers to events using jQuery or native addEventListenet (that is less portable way for now because of IE).

Answer 4

Add a parameter, and when label() is called it will pass the source. You could pass a string as below, or you could pass the anchor itself and use it with jquery to find the children you are modifying. you don't have to use jQuery, but in case you want to I showed you an example below.

function label(source){
    $(source).find('h4').html('badges');
};

<a href... onClick='label(this)'>