Question

I have the following HTML code (which is placed within several files), which inserts a selected/clicked smiley within a textarea:

<a href="javascript:insertTheSmiley(':)');void(0)"><img src="images/smile.gif" alt=":)" title=":)" /></a>

<!-- this is a link to open a popup listing all smilies (see smilies.html to see what it contains) -->
<a href="#" onClick="window.open('smilies.html', 'Smilies', 'width=250,height=500,scrollbars=1');">Show all smilies</a>

<textarea id="textarea" cols="60" rows="10" style="width: 100%"></textarea>

<a href="javascript:insertTheSmiley(':)');void(0)"><img src="images/smile.gif" alt=":)" title=":)" /></a>

<!-- this is a link to open a popup listing all smilies (see smilies.html to see what it contains) -->
<a href="#" onClick="window.open('smilies.html', 'Smilies', 'width=250,height=500,scrollbars=1');">Show all smilies</a>

<textarea id="textarea" cols="60" rows="10" style="width: 100%"></textarea>

The smilies.html contains the following HTML:

<a href="javascript:putTheSmiley(':)');void(0)"><img src="images/smile.gif" alt=":)" title=":)" /></a>

and the JavaScript functions used are:

<script>
function insertTheSmiley(input) {
document.getElementById('textarea').value += input;
}

function putTheSmiley(input) {
window.opener.insertTheSmiley(input);
}
</script>

What I’m intending for it to do is place the selected/clicked smiley in the appropriate textarea, currently (as an example scenario) if I click on the second smiley link (aswell as within the smilies.html) it places the smiley within the first textarea, however I want it to be placed within the second (which is what I consider the appropriate one) – this is just an example to illustrate my problem.

I’m guessing its an issue with the element id, is their some way to automate this or a workaround, as I’ve seen many forum software do this?

Heres a thought (which doesn’t seem to work):

<script>
function insertTheSmiley(input, id) {
global id;
document.getElementById(id).value += input;
}

function putTheSmiley(input) {
global id;
window.opener.insertTheSmiley(input, id);
}
</script>

Answer 1

First of all, give different ID to each textarea.. having both with the same ID is bad and wrong.

Second, when calling the function pass the ID of the desired textarea:

href="javascript:insertTheSmiley(':)', 'MySecondTextarea');void(0)"

And finally in the function insertTheSmiley change the code to get the ID from the function parameters instead of the way it’s now – post the code of the function if you need help with this.