Take the 2-minute tour ×

Say I have a list with radio buttons in it, how do I make it so hovering over the label will write the value of the radio button into HTML into a p tag.

So say it was

o Option One

Hovering over Option One would write the value of the radio button into a p tag below.

My code is below and it won't work. It should update obviously if the user clicks a different radio button.

function showDegree() {

var degreeOptions = document.getElementsByName('degree');
var degreeChoice;
var i;

for (i = 0; i < degreeOptions.length; i++) {
    if (degreeOptions[i].checked) {
        degreeChoice = degreeOptions[i].value;

document.getElementById('degreeOutput').innerHTML = degreeChoice;


share|improve this question

2 Answers 2

up vote 1 down vote accepted

You would have to use an Event, you're thinking of the word Hover (which is mostly for styling) but in this case you need to think of the word onmouseover (which is for actions... events).

Let's say you have this:

<input type=radio value="val1">Option 1
<p id=optDisplay></p>

You would have to put in each input the following:

<input type=radio value="val1" onmouseover="document.getElementById( 'optDisplay').textContent = this.value;">Option 1

Notice that it would only happen when the mouse pointer is over the radio element, that is only the little circle, won't work if you pointer the text "Option 1". If you would like to accomplish that you could wrap the input element and the text inside another tag like a span or div which would have to have the onmouseover like this:

<span onmouseover="document.getElementById( 'optDisplay').textContent = this.firstChild.value;"><input type=radio value="val1"> Option 1</span>

The onmouseover changed a little, as for what you say about "updating" when clicking you don't have to do anything as if you click it the mouse will be over it, and as long as you don't pointer any other option it would remain like that.

It would be a little more tricky to make once clicked prevent any more changes, but thinking quickly you could for example add another event onclick to remove the id of the <P> then after that, if you pointer the other option they wouldn't find the <P>, no update.

share|improve this answer

try if

.checked == true


if .checked == 'checked'

-- I'm sorry I'm so used to coding around jQuery that I forgot the right way to do this native... on that note, if performance isnt an issue, you might want to consider using jquery, this would be simple in jquery.

share|improve this answer
also if you have a javascript console (firebug) or chrome has one built in, use console.log(degreeOptions[i].checked); on every iteration of the loop to see what the property is set to for each itteration, you can then condition your comparison based on what it shows. –  SublymeRick Oct 25 '11 at 23:41

Your Answer


