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/>
if you are using jquery, you could do the following.

```
<input id='textbox' type='text' />

<div id='container'>
    <img src="a.png" id="A" data-char='A'/>
    <img src="b.png" id="B" data-char='B'/>
    <img src="c.png" id="C" data-char='C'/>
</div>

```

I've added a container div, to make the click event slightly more specific. If there was no container and the click event was purely on the img selector, it would fire for clicking on any image on the page.

the JS

```
$('#container').on('click', 'img', function (e) {
     var char = $(this).attr('data-char');
     var textboxValue = $('#textbox').val();
     $('#textbox').val(textboxValue + char);

});

```

There are many ways to do the same thing. I like this approach the most.

**EDIT:**
Updated as suggested by Brandon