Попытка получить событие мыши, когда по радиокнопке

Вопрос:

Я пытаюсь вызвать функцию, когда я нажимаю переключатель. Функция никогда не вызывается. Первая из моих двух переключателей ниже показывает мою последнюю попытку.

<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>

РЕДАКТИРОВАТЬ:

Вот мои функции JS. Я поставил предупреждение, чтобы уведомить меня, если я включил его в функцию.

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

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

Лучший ответ:

Две вещи, которые я заметил:

1.Вы проверили свойство на вашем первом переключателе, необходимо проверить = “checked”

2. Этот код, похоже, работает при наведении курсора на переключатели. Если вы хотите, чтобы это работало при наведении указателя мыши на ярлык, вы также захотите добавить ярлыки onmouseover и onmouseout. Например:

<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.net/puddinman13/Mh7PZ/

Ответ №1

Как вы объявляете свои функции (mouseOver и mouseOff)?

Может быть, он не объявлен в глобальном масштабе. Я пробовал свой код здесь, и, похоже, это сработало, за исключением того, что не все переключатели, называемые mouseOver() или mouseOff().

Попробуйте объявить свои функции следующим образом:

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