I am trying to call a function when I mousever a radio button. The function never gets called. The first of my two radio buttons below show my latest attempt.

<form action="#">
   <ul>                     
      <li>
         <input type="radio" class="button" name="buttonSubGroup" onclick="Door();" onmouseover="mouseOver('doorMouseover')" onmouseout="mouseOff('doorMouseover')" id="button1" checked/>
         <label for="button1">Door</label>
      </li>
      <li>
         <input type="radio" class="button" name="buttonSubGroup" onclick="Trim();" id="button2" />
         <label for="button2">Trim</label>
      </li>
      <li>
         <input type="radio" class="button" name="buttonSubGroup" onclick="Roof();" onmouseover="mouseOver('roofMouseover');" onmouseout="mouseOff('roofMouseover');" id="button3" />
         <label for="button3">Roof</label>
      </li>
      <li>
         <input type="radio" class="button" name="buttonSubGroup" onclick="Siding();" id="button4" />
         <label for="button4">Siding</label>
      </li>
      <li>
         <input type="radio" class="button" name="buttonSubGroup" onclick="Stone();" id="button5" />
         <label for="button5">Stone</label>
      </li>
      <li>
         <input type="radio" class="button" name="buttonSubGroup" onclick="BB();" id="button6" />
         <label for="button6">BB</label>
      </li>
   </ul>
</form>

EDIT:

Here are my JS functions. I put an alert to notify me if I made it into the function.

function mouseOver(a) {
    alert(a)
    document.getElementById(a).style.visibility = 'visible';
}

function mouseOff(a) {
    alert(a);
    document.getElementById(a).style.visibility = 'hidden';
}

I am trying to call a function when I mousever a radio button. The function never gets called. The first of my two radio buttons below show my latest attempt.

<form action="#">
   <ul>                     
      <li>
         <input type="radio" class="button" name="buttonSubGroup" onclick="Door();" onmouseover="mouseOver('doorMouseover')" onmouseout="mouseOff('doorMouseover')" id="button1" checked/>
         <label for="button1">Door</label>
      </li>
      <li>
         <input type="radio" class="button" name="buttonSubGroup" onclick="Trim();" id="button2" />
         <label for="button2">Trim</label>
      </li>
      <li>
         <input type="radio" class="button" name="buttonSubGroup" onclick="Roof();" onmouseover="mouseOver('roofMouseover');" onmouseout="mouseOff('roofMouseover');" id="button3" />
         <label for="button3">Roof</label>
      </li>
      <li>
         <input type="radio" class="button" name="buttonSubGroup" onclick="Siding();" id="button4" />
         <label for="button4">Siding</label>
      </li>
      <li>
         <input type="radio" class="button" name="buttonSubGroup" onclick="Stone();" id="button5" />
         <label for="button5">Stone</label>
      </li>
      <li>
         <input type="radio" class="button" name="buttonSubGroup" onclick="BB();" id="button6" />
         <label for="button6">BB</label>
      </li>
   </ul>
</form>

EDIT:

Here are my JS functions. I put an alert to notify me if I made it into the function.

function mouseOver(a) {
    alert(a)
    document.getElementById(a).style.visibility = 'visible';
}

function mouseOff(a) {
    alert(a);
    document.getElementById(a).style.visibility = 'hidden';
}

• javascript
• html

Share Improve this question Follow edited Jul 23, 2014 at 16:54 kinezu asked Jul 23, 2014 at 16:46 kinezukinezu 1,27222 gold badges1313 silver badges2424 bronze badges 6

• 4 This seems to work, can you share your javascript? – puddinman13 Commented Jul 23, 2014 at 16:49
• Seems to work codepen.io/viralpickaxe/pen/aCymG – viralpickaxe Commented Jul 23, 2014 at 16:50
• Please paste what you've tried for us to know how to help you – Salathiel Genese Commented Jul 23, 2014 at 16:50
• where is your javascript code? please post asap. – Krupal Shah Commented Jul 23, 2014 at 16:52
• Added Javascript code – kinezu Commented Jul 23, 2014 at 16:55

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 6

Two things I have noticed:

1.Your checked property on your first radio button should be checked="checked"

2.This code seems to work when hovering over the radio buttons. If you would like it to work when hovering over the label, you will want to add onmouseover and onmouseout event handlers to the labels also. For example:

<li>
<input type="radio" class="button" name="buttonSubGroup" onclick="Door();" onmouseover="mouseOver('doorMouseover')" onmouseout="mouseOff('doorMouseover')" id="button1" checked="checked"/>
<label for="button1" onmouseover="mouseOver('doorMouseover')" onmouseout="mouseOff('doorMouseover')>Door</label>
</li>

http://jsfiddle/puddinman13/Mh7PZ/

How are you declaring your functions (mouseOver and mouseOff)?

It could be that it isn't declared in the global scope. I tried your code here, and it seemed to work, except that not all of the radio buttons called mouseOver() or mouseOff().

Try declaring your functions like this:

 window['mouseOver']=function(data) {
    //do something
};
window['mouseOff'] = function(data) {
    //do something else
}