Question: Overview : I am making 9\*9 table in html within which I will fill different images (of alphabets i.e. 'A' or 'B') what I want is to make it such a way that as user clicks an image then a corresponding character is input in text-box below it.

Such as user clicks on image of 'A' then 'A' will be entry of text-box next user clicks on 'Z' then new entry will be 'AZ' (without single quotes ;-) Obviously).
Can anyone help me out with any example of given JavaScript code.

Answer: 
You can use event delegation to make this very clean. Personally I would just use the alt attribute of my images and not bother with data attributes or IDs. The relevant part is here:

```
$(tableElement).on('click', 'img', function(event) {
    var target = event.target;
    label.innerText = label.innerText + target.alt;
});

```

But you can find a working, randomly generated version (minus image sources) here: <http://jsfiddle.net/K79FQ/>
(Why does everyone assume jQuery?)

I'm using event delegation, and assuming that the images are set as the background to the cells. I've only completed this for the first row, and the nbsp's won't be necessary when css is applied to the table.

```
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
<table id="tblLetters">
    <tr><td data-lett="A">&nbsp;</td><td data-lett="B">&nbsp;</td><td data-lett="C">&nbsp;</td></tr>
    <tr><td>D</td><td>E</td><td>F</td></tr>
    <tr><td>G</td><td>H</td><td>I</td></tr>
</table>
<input type="text" id="results">

<script type="text/javascript">
var addEvent = function (elem, eventType, func) {
    if ( elem.addEventListener )
        addEvent = function (elem, eventType, func) {
            elem.addEventListener(eventType, func, false);
        };
    else if ( elem.attachEvent )
        addEvent = function (elem, eventType, func) {
            elem.attachEvent('on' + eventType, func);
        };
    addEvent(elem, eventType, func);
};

var delegateEvent = function (elem, childElems, eventType, func) {
    addEvent(elem, eventType, function (e) {
        var evt = e || window.event;
        var elem = evt.target || evt.srcElement;
        if ( elem.nodeName.toLowerCase() == childElems ) {
            func(elem);
        }
    });
};
function updateResults(cell) {
    document.getElementById('results').value += cell.getAttribute('data-lett');
}
delegateEvent(document.getElementById('tblLetters'), 'td', 'click', updateResults);
</script>
</body>
</html>

```