get source of click in javascript?

Question

I'm designing a webpage which uses very basic javascript. Here's the code:

html:

<!DOCTYPE html>
<html>
<body>

<img id="apple" onclick="display()" src="images/apple.jpg" width="150" height="150">

<img id="pineapple" onclick="display()" src="images/pineapple.jpg" width="130" height="210">

<br><br>

<div id="description" style="width:300px;height:100px;border-top: 1px solid #000; border-bottom: 4px solid #000; border-left: 2px solid #000; 

border-right: 4px solid #000;padding: 5px;"></div>

<br>

<button type="button" onclick="reset()">Reset</button>

<script type="text/javascript" src="obst.js"></script>

</body>
</html>

Here's the javascript:

function display()
{
document.getElementById("description").innerHTML="der Apfel - Apple<br>die Äpfel - Apples<br><br>Ein Apfel am 

Tag hält den Arzt weg<br>- An apple a day keeps the doctor away";
}

function reset()
{
document.getElementById("description").innerHTML="";
}

Clicking on the image of the apple displays text in the description box. Clicking on the image of the pineapple displays some other text in the same place.

Instead of using different functions like apple(), pineapple() to insert text, I thought it would be easier to call a display function whenever something is clicked, and in the display function, if the script could identify the source of the click (that is, which image is clicked), it could insert text accordingly.

How do I go about this identifying the click source?

Ahmed Kato · Answer 1 · 2012-11-11T13:39:02.827

1

You can use this.id:

<img id="apple" onclick="display(this.id)" src="images/apple.jpg" width="150" height="150">

<img id="pineapple" onclick="display(this.id)" src="images/pineapple.jpg" width="130" height="210">

then catch the id:

function display(clicked_id)
{
 alert(clicked_id);
}

edited Nov 11 '12 at 13:39

answered Nov 11 '12 at 13:01

Ahmed Kato

1,697
4
29
53

score 0 · Answer 2 · answered Nov 11 '12 at 12:56

You would pass this to the display() handler, then you can access the properties of the DOM element that received the click. Here is the fiddle: http://jsfiddle.net/dandv/BaNdS/. Essentially,

<img id="apple" onclick="display(this)" ... >

<img id="pineapple" onclick="display(this)" ... >

<script type="text/javascript">
    function display(self) {
        alert(self.id);
    }
</script>

score 0 · Answer 3 · answered Nov 11 '12 at 12:56

0

There is a easier way. Use a variable:

 function selectFruit(fruit){
     if(fruit == 'apple'){
       .....
     }else if(fruit == 'pinapple'){
       .....
     }
     ...
 }

answered Nov 11 '12 at 12:56

Javi Pedrera

2,075
4
21
29

I don't think the OP has need for a function with a lot of if-else statements. Have a look at [Alternatives to a million if-statements](http://stackoverflow.com/q/10029089/1048572) – Bergi Nov 11 '12 at 13:02

Bergi · Answer 4 · 2012-11-11T14:14:45.700

Simple and easy solution: pass arguments to the display function:

<img id="apple" onclick="display('apple');" …>
<img id="pineapple" onclick="display('pineapple');" …>

Better solution: Use the javascript-only (no JS in HTML markup) traditional or even the advanced event handling model. The listeners (which might be attached to multiple elements) will get passed an event object, from which you can determine which element was clicked. Example:

function clickHandler(eventObj) {
    var elem = eventObj.target;
    if (elem.nodeName.toLowerCase() == 'img' && elem.id)
        display(elem.id);
}

David G · Answer 5 · 2012-11-11T13:15:07.677

0

Probably the simplest way:

var code, node = document.getElementById('description');

code = {
    apple    : "Apple",
    pineapple: "Pineapple"
};

function display( src ) {

    node.innerHTML = node.innerHTML ? "" : code[ src.id ] ;

}

for ( var i in code ) {

    document.getElementById( i ).onclick = function() { display( this ) };

}

Demo on jsFiddle

edited Nov 11 '12 at 13:15

answered Nov 11 '12 at 13:01

David G

94,763
41
167
253

Shadow The GPT Wizard · Answer 6 · 2012-11-11T13:11:12.573

I would go in a somewhat different direction:

For each possible "term" have hidden block of text with the desired contents.
In each image tag add the ID of its proper placeholder as a rel attribute.
Have JavaScript running on page load, assigning the click event automatically.

Sample HTML would be:

<img id="apple" src="images/apple.jpg" rel="desc_Apple" width="150" height="150" />

<img id="pineapple" src="images/pineapple.jpg" rel="desc_Pineapple" width="130" height="210" />

<div class="item_placeholder" id="desc_Apple">
der Apfel - Apple<br>die Äpfel - Apples<br><br>Ein Apfel am 
Tag hält den Arzt weg<br>- An apple a day keeps the doctor away
</div>
<div class="item_placeholder" id="desc_Pineapple">
der Apfel - Pineapple<br>die Äpfel - Pineapples<br><br>Ein Apfel am 
Tag hält den Arzt weg<br>- An Pineapple a day keeps the doctor away
</div>

Don't forget CSS to make those hidden:

.item_placeholder { display: none; }

And finally the magic to bind them all:

window.onload = function() {
    for (var i = 0; i < document.images.length; i++) {
        var image = document.images[i];
        var rel = image.getAttribute("rel");
        if (rel && rel.length > 0) {
            image.onclick = ItemImageClick;
        }
    }
};

function ItemImageClick() {
    var rel = this.getAttribute("rel");
    var placeholder = document.getElementById(rel);
    if (placeholder) {
        document.getElementById("description").innerHTML = placeholder.innerHTML;
    } else {
        alert("DEBUG - element not found " + rel);
    }
}

Live test case.

get source of click in javascript?

6 Answers6