Does anyone know a way to do this?

Lets say we have a page that has the following information:
<content>
Clean Dirty Widgets Blue Green Red

< blank text box >
</content>

I would like to make the individual words "clickable", so when you click the word, it places that work inside the text box. Then, if you click another word, it places that word in the text box AFTER the first word. Basically, if you click the words in any order, it will record the order they were clicked in the text box.

If I click Dirty, then Red, then Widgets; it would show the following in the text box:

Dirty Red Widgets

Is that possible? I am guessing this would be done in javascript, but I am not certain. Can someone point me in the right direction?

Thank you.

Frank

At the simplest;
each word would need to be a seperate entity in a span with an ID, then with an onClick routine assigned to the element you could do something like;

function copyToTextBox(eleID) {
     strText = document.getElementByID(eleID).innerHTML; 
     document.getElementByID("textboxName").value = document.getElementByID("textboxName").value + ' ' +strText;
}

use onClick="copyToTextBox(this.ID)" to call


not tested the code at all.

Maybe something, like that:

 
function F(e) {
  var r, w;
  if(document.selection) {
    (r = document.body.createTextRange())
      .moveToPoint(e.clientX, e.clientY);
    r.expand('word');
    w = r.text;
  }
  else if(document.createRange) {
    (r = document.createRange())
      .setStart(e.rangeParent, e.rangeOffset);
    r.setEnd(e.rangeParent, e.rangeOffset);
    window.expandRangeToWord(r);
    w = r.toString();
  }
  return w;
}

 
<p onclick="document.getElementById('test').value += ' ' + (F(event) || '')">
  Clean Dirty Widgets Blue Green Red
</p>
<textarea id='test' cols='20' rows='10'></textarea>

i think this would be more easy if u do that in server side.