Question

Say I have a list with radio buttons in it. How do I make it such that 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;
}

Answer 1

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.