Question

I would like to change the value of a textarea when hovering over a link. I am not very proficient at javascript and do not quite understand the intricacies of ‘this.’ and ‘document.’ etc..

Currently I have a textarea ‘info’ that on page load is unpopulated and two links that should change its value. I can not seem to get it to work..

<textarea name="info"></textarea>
<a href="foo.com" onmouseover="document.info.value='foo.com is a great site'">Foo.com</a>
<a href="bar.com" onmouseover="document.info.value='bar.com is a terrible site'">Bar.com</a>

I’m sure there is a way to accomplish what I need to do but I can’t find it.

Thanks in advance.

Answer 1

Create a function, that accepts the string you want, and sets the textarea:

   // Select the textarea by its ID (that you need to give it)
var textarea = document.getElementById('info');  

   // Define the function that sets the value passed
function changeTextarea( str ) {
    textarea.value = str;
}

Assign an ID to the textarea, and call the function in the onmouseover, passing the string you want to set:

<textarea name="info" id='info'></textarea>

<a href="foo.com" onmouseover="changeTextarea('foo.com is a great site')">Foo.com</a>
<a href="bar.com" onmouseover="changeTextarea('bar.com is a terrible site')">Bar.com</a>

Example: http://jsfiddle.net/nmZb9/