Блог

Главная - Вопросы по программированию - Обработчик события onChange с выбранным элементом, который может отображать скрытый элемент

Обработчик события onChange с выбранным элементом, который может отображать скрытый элемент

#javascript #javascript-events

#javascript #javascript-события

Вопрос:

Это мой код ниже, что я пытаюсь сделать, только если я выберу «НЕТ», строка таблицы должна отображаться. Я попробовал это событие onchange и DOM, чтобы я мог получить скрытую таблицу, которая должна отображаться. Но я не знаю, почему это не работает.

 <!DOCTYPE html>
<html>
<head>
<script>


function showstuff(){
   document.getElementById(show).style.display="block";
}
</script>
</head>

<body>

<form>
Choose which browser you prefer:
<select id="browsers" onchange="showstuff(show)">
<option value="Maybe">May Be</option>
<option value="Yes">Yes</option>
<option value="NO">No</option>
</select>
</form>

<table>
       <tr id="show" style="display: none">
<td>Write why no?</td>
<td><input type="text" name="whyno"></td>
</tr>


</table>

</body>
</html>

Ответ №1:

В JavaScript идентификаторы элементов DOM представляют собой строки, поэтому вы должны заключать их в одинарные или двойные кавычки, т. Е. 'show' , И если вы хотите передать определенное значение функции, вы должны определить имя аргумента, т. Е. function showstuff(argument) , А затем использовать аргумент в остальной части вашей функции.

Редактировать: я изменил вашу функцию, чтобы принимать три аргумента: элемент, который вы хотите показать, параметр, который должен быть отмечен, и ссылку на элемент, который был изменен. Например, showstuff('show', 'NO', this) будет отображаться элемент с id="show" только в том случае, если 'NO' выбран параметр.

Измените свою функцию на эту:

 function showstuff(element, option, t){
   if(t.options[t.selectedIndex].value==option){
      document.getElementById(element).style.display="block";
   }else{
      document.getElementById(element).style.display="none";
   }
}

И HTML к этому:

 <select id="browsers" onchange="showstuff('show', 'NO', this);">

Пример jsFiddle.

Комментарии:

1. Да, это работает, но я хочу, чтобы элемент отображался только в том случае, если я выбираю «Нет»

2. Я немного изменил код, чтобы скрыть поле, как только вы снова выберете что-то другое, и добавил живой пример в jsFiddle. Теперь это должно сработать для вас.

Метки: