В вашем коде отсутствует лог c 'если выбрано соответствующее значение, не скрывайте, иначе скрывайте'; т. е. ваше if
утверждение неверно.
При этом лучше заменить его на classList.toggle('show', <predicate>
, чтобы избежать повторения (4 раза) по существу того же оператора if / else.
Там Есть куча других проблем с вашим кодом в отношении читабельности и лучших практик. Я не буду перечислять их все, но ниже приведено то, к чему вы должны стремиться.
const $ = document.querySelector.bind(document);
$('#selectDocumentType').addEventListener('change', () => {
[
['public', 'hide'],
['internal', 'hide2'],
['confidential', 'hide3'],
['secret', 'hide4'],
].forEach(([value, elId]) => $(`#${elId}`).classList.toggle('show', value === $('#selectDocumentType').value));
});
p.light {
font-family: helvetica, garamond, serif;
font-size: 12px;
font-style: normal;
display: none;
}
p.show {
display: block;
}
<select id="selectDocumentType" name="documentClass">
<option value="Choose">Choose a classification!</option>
<option value="public">Public</option>
<option value="internal">Internal</option>
<option value="confidential">Confidential</option>
<option value="secret">Secret</option>
</select>
<p class="light hidden" id="hide">Wizard Is working</p>
<p class="light hidden" id="hide2">Wizard Is Twerking</p>
<p class="light hidden" id="hide3">Wizard Is Laughing</p>
<p class="light hidden" id="hide4">Wizard Is Eating</p>
Редактирование, практика чистого кода:
1) Используйте document.querySelector
вместо document.getElementById
, поскольку он более универсален. Это часто связано с $
для меньшего набора текста.
2) Используйте let
& const
вместо var
для объявления переменных. Используйте имена переменных в верхнем регистре только для const
с и в нижнем регистре для не const
с.
3) Используйте операторы switch
вместо повторяющихся if/else
, сравнивая одну и ту же переменную на равенство.
4) Используйте ===
вместо ==
.
5) Правильно отформатируйте код. Например, отступы и пробелы вокруг операторов.
6) Предпочитать функции стрелок () => {}
вместо ключевого слова function
.
7) Использовать element.addEventListener('event')
в JS вместо onevent
in HTML.
8) Не используйте заглавные буквы HTML (например, ID, классы и т. д. c). Используйте регистр da sh, например, id="min-value-input"
.
9) Для тегов <p>
нет атрибута align
.
10) Не используйте атрибут style
в HTML. Аналогично, не устанавливайте style
свойства в JS. Вместо этого используйте атрибут class
в HTML, а element.classList.add|remove|toggle
в JS.
11) regular
- недопустимое значение CSS font-style
. Вы, вероятно, имели в виду normal
.