Скрыть/показать ярлык и текстовое поле на выпадающем списке

Я пытаюсь скрыть/отобразить ярлык и текстовое поле в раскрывающемся списке.Скрыть/показать ярлык и текстовое поле на выпадающем списке

Так что выбран вариант Нет, я не хочу, чтобы отобразить что-нибудь еще

Если 1 выбран, я хочу показать 1 метку и 1 текстовое поле If 2 выбран, я не хочу, чтобы отобразить 2 метки и 2 текстовое поле

Что я делаю неправильно?

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function checkvalue(val) 
{ 
if(val==="No") 
{ 
    document.getElementById('guest_label').style.display='none'; 
    document.getElementById('guest_name1').style.display='none'; 
    document.getElementById('guest_label').style.display='none'; 
    document.getElementById('guest_name2').style.display='none'; 
} 

else if(val==="1") 
{ 
    document.getElementById('guest_label').style.display='block'; 
    document.getElementById('guest_name1').style.display='block'; 
} 
else 
{ 
    document.getElementById('guest_label').style.display='block'; 
    document.getElementById('guest_name1').style.display='block'; 
    document.getElementById('guest_label').style.display='block'; 
    document.getElementById('guest_name2').style.display='block'; 
} 
    } 
</script> 
</head> 
<body> 

<label for="guest_number">Any Guest: </label> 
    <select name="guest" onchange='checkvalue(this.value);'> 



       <option value="No" selected >No</option> 
       <option value="1">1</option> 
       <option value="2">2</option> 
      </select> 


<label for="guest_label" style='display:none'>Other Guest Name: </label> 
<input type="text" name="guest_name" id="guest_name1" style='display:none'/> 
<input type="text" name="guest_name" id="guest_name2" style='display:none'/> 
</body> 
</html>

Благодаря

источник

2015-09-22 user3897102

Если код, который вы размещены не было неполным, у вас нет элемента с идентификатором «guest_label». JS возвратила ошибку, когда попыталась ссылаться на свойство элемента с этим id, которое является нулевым.

источник

2015-09-22 16:12:08 DPac

есть <метка для = стиля «guest_label» = «дисплей: нет»> Другого Имя гостя: – user3897102

«За» атрибут ссылается на идентификатор элемента, ярлык для. Так, например, у вас есть текстовое поле с идентификатором «input1» и метка с атрибутом «input1» для этого текстового поля. Атрибут «для» в основном предназначен для семантики, это не идентификатор для этого элемента метки. Дайте мне знать, если это имеет смысл. – DPac

также см. @rajuGT ответ на исправленный код – DPac

Изменение второй маркирующие из

<label for="guest_label" style='display:none'>Other Guest Name: </label>

<label id="guest_label" style='display:none'>Other Guest Name: </label>

Ваш код JavaScript потерпит неудачу в document.getElementById('guest_label') .style.display='none';, когда он не в состоянии найти элемент, чей идентификатор «guest_label».

document.getElementById ('guest_label') возвращает null, и мы не можем вызвать .style для нулевого значения.

Check исправленный.

источник

2015-09-22 16:15:33 rajuGT

Спасибо, это отобразило то, что я хочу, но оно не обновляется, если я нажму на 2 и нажму на 1 – user3897102

Конечно, есть атрибут, называемый https: //developer.mozilla. org/en-US/docs/Web/HTML/Element/label - ошибка там должна быть 'for =" guest_name1 "' – mplungjan

О да. Я сожалею, что полностью забыл. Но его логика кода заключалась в том, чтобы работать с атрибутом id, а не с атрибутом for. будет соответствующим образом обновляться. – rajuGT

Вам необходимо включить идентификаторы для guest_label1 и guest_label2, а затем выбрать toggle guest_label2 из 1.

<script> 
function checkvalue(val) 
{ 
if(val=="No") 
{ 
    document.getElementById('guest_label1').style.display='none'; 
    document.getElementById('guest_name1').style.display='none'; 
    document.getElementById('guest_label2').style.display='none'; 
    document.getElementById('guest_name2').style.display='none'; 
} 

else if(val==="1") 
{ 
    document.getElementById('guest_label1').style.display='block'; 
    document.getElementById('guest_name1').style.display='block'; 
    document.getElementById('guest_label2').style.display='none'; 
    document.getElementById('guest_name2').style.display='none'; 
} 
else 
{ 
    document.getElementById('guest_label1').style.display='block'; 
    document.getElementById('guest_name1').style.display='block'; 
    document.getElementById('guest_label2').style.display='block'; 
    document.getElementById('guest_name2').style.display='block'; 
} 
    } 
</script> 
</head> 
<body> 
<label for="guest_number">Any Guest: </label> 
    <select name="guest" onchange='checkvalue(this.value);'> 



       <option value="No" selected >No</option> 
       <option value="1">1</option> 
       <option value="2">2</option> 
      </select> 


<label id="guest_label1" for="guest_label" style='display:none'>Other Guest Name: </label> 
<input type="text" name="guest_name" id="guest_name1" style='display:none'/> 
    <label id="guest_label2" for="guest_label" style='display:none'>Other Guest Name: </label> 
<input type="text" name="guest_name" id="guest_name2" style='display:none'/> 
</body> 
</html>

источник

2015-09-22 16:17:47

Спасибо. Это работает, но если я нажму на 2 и нажмите 1 назад, он не обновится и покажет 2 ярлыка и текстовое поле. – user3897102

Хммм, работает на моем конце. Я бы дважды проверить и убедиться, что ваш код соответствует моему фрагменту. –

Разве это в конечном итоге работает на вас? –

Скрыть/показать ярлык и текстовое поле на выпадающем списке

ответ

Смежные вопросы