Показать / скрыть проблему с Javascript
Я нашел этот скрипт в Интернете, он должен показывать скрытые текстовые поля и метки. любые изменения, которые я внесу в него, остановят его работу, если я изменю пароль div, он также не будет работать. Проблема в том, что если я выберу «НЕТ», то после этого все будет скрыто. Как мне заставить его скрывать только желаемую часть, и как установить флажок "Нет" по умолчанию?
<script type = "text/javascript">
function ShowHideDiv() {
var chkYes = document.getElementById("chkYes");
var dvPassport = document.getElementById("dvPassport");
dvPassport.style.display = chkYes.checked ? "block" : "none";
}
</script>
<span>Do you have More Education?</span>
<label for = "chkYes">
<input type = "radio" id = "chkYes" checked name = "chkEducation"
onclick = "ShowHideDiv()" />
Yes
</label>
<label for = "chkNo">
<input type = "radio" id = "chkNo" name = "chkEducation" onclick = "ShowHideDiv()"/>
No
</label>Я попытался закончить его с помощью или body и начать новую голову, но это не помогло. Спасибо.
Я не вижу, чтобы dvPassport действительно существовал?
нет, это не так, но если я изменю его, функция вообще не будет работать. Я нашел этот сценарий в Интернете и внес в него некоторые изменения. Спасибо.
@Andrea Naspi Спасибо за объяснение и помощь, я новичок в html и скучаю по простым вещам, но это очень ясно.
@Rachel Gallen Спасибо за объяснение и помощь, я новичок в html и упускаю из виду простые вещи, но это очень ясно.
@AlwaysLearning добро пожаловать :)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Чтобы установить "no" по умолчанию, установите input type = "radio" с id = "chkNo" в html как отмеченный (теперь отмеченный элемент - inpu type = "radio" с id = "chkYes") и установите div с id = "dvPassport" в HTML с style = "display: none". Функция ShowHideDiv кажется правильной, чтобы скрыть только те элементы, которые вы хотите, просто установите id = "dvPassport" в div, содержащем ТОЛЬКО текстовые поля и метки. Пример:
<script type = "text/javascript">
function ShowHideDiv() {
var chkYes = document.getElementById("chkYes");
var dvPassport = document.getElementById("dvPassport");
dvPassport.style.display = chkYes.checked ? "block" : "none";
}
</script>
<span>Do you have More Education?</span>
<label for = "chkYes">
<input type = "radio" id = "chkYes" name = "chkEducation"
onclick = "ShowHideDiv()" />
Yes
</label>
<label for = "chkNo">
<input type = "radio" id = "chkNo" checked name = "chkEducation" onclick = "ShowHideDiv()"/>
No
</label>
<div id = "dvPassport" style = "display:none">
<br/>
<input type = "text" placeholder = "text1"/>
<br/><br/>
<input type = "text" placeholder = "text2"/>
<div>Для начала, чтобы установить «нет» по умолчанию, вы просто переместите слово «проверено» из поля «Да» в поле «Нет»:
<input type = "radio" id = "chkNo" **checked** name = "chkEducation" onclick = "ShowHideDiv()"/>
Я окружил ваш код div (id dvPassport), чтобы воссоздать вашу проблему.
Один из способов решить эту проблему - использовать тег section в вашем div вокруг ваших переключателей. Я вставил тег абзаца после раздела, чтобы продемонстрировать эффект (например, если кто-то переключился на ДА, а затем обратно на НЕТ)
Надеюсь это поможет
Рэйчел
<script type = "text/javascript">
function ShowHideDiv() {
var chkYes = document.getElementById("chkYes");
//var dvPassport = document.getElementById("dvPassport");
var education = document.getElementById("edu");
//dvPassport.style.display = chkYes.checked ? "block" : "none";
education.style.display = chkYes.checked ? "block" : "none";
}
</script>
<div id = "dvPassport">
<section id = "edu">
<span>Do you have More Education?</span>
<label for = "chkYes">
<input type = "radio" id = "chkYes" name = "chkEducation"
onclick = "ShowHideDiv()" />
Yes
</label>
<label for = "chkNo">
<input type = "radio" id = "chkNo" checked name = "chkEducation" onclick = "ShowHideDiv()"/>
No
</label>
</section>
<p>hello</p>
</div>На самом деле, сделайте это так, как Андреа (если вы действительно не хотите скрыть вопрос?) .. Но разделы удобны для использования в будущем ..
Раздел - это хорошее решение, но обратите внимание, потому что в этом решении, когда вы ставите галочку «нет», он также скрывает переключатели, и вы не можете вернуться назад :)
Пожалуйста, опубликуйте более полный образец кода. Например, где находится HTML-элемент с id = "dvPassport"?