Задать вопрос
@a9332
javascript

Все сложно — JavaScript, или что я делаю не так?

Есть выпадающий список.
При активации пункта из списка отображается определенный текст.
Если выбрать один пункт, а затем выбрать другой (не по порядку), то первый не исчезает.
Как заставить пункты из предыдущего выбора исчезнуть?
<script>
    function showBlock(val){
        document.getElementById('id1').style.display='none';
        document.getElementById('id2').style.display='none';
        document.getElementById('id3').style.display='none'; 
        document.getElementById('id4').style.display='none';
        document.getElementById('id5').style.display='none';
        document.getElementById('id6').style.display='none'; 
        document.getElementById('id7').style.display='none';
        document.getElementById('id8').style.display='none';
        document.getElementById('id9').style.display='none'; 
        document.getElementById('id10').style.display='none';
        document.getElementById('id11').style.display='none';
        document.getElementById('id12').style.display='none'; 
        document.getElementById('id24').style.display='none';
        document.getElementById('id'+val).style.display='block';        
    }
</script>
<style>
    #id1, #id2, #id3, #id4, #id5, #id6,#id7,#id8,#id9,#id10,#id11,#id12,#id24{display:none}   
</style>
<select name="items" onchange="showBlock(this.value)">
    <option value="0">--</option>
    <option value="1">1 месяц</option>
    <option value="2">2 месяца</option>
    <option value="3">3 месяца</option>
    <option value="4">4 месяца</option>
    <option value="5">5 месяцев</option>
    <option value="6">6 месяцев</option>
    <option value="7">7 месяцев</option>
    <option value="8">8 месяцев</option>
    <option value="9">9 месяцев</option>
    <option value="10">10 месяцев</option>
    <option value="11">11 месяцев</option>
    <option value="12">12 месяцев</option>
    <option value="24">24 месяца</option>
</select><br><br>

<div id="id1»>текст</div>
<div id="id2»>текст</div>
<div id="id3»>текст</div>
<div id="id4»>текст</div>
<div id="id5»>текст</div>
<div id="id6»>текст</div>
<div id="id7»>текст</div>
<div id="id8»>текст</div>
<div id="id9»>текст</div>
<div id="id10»>текст</div>
<div id="id11»>текст</div>
<div id="id12»>текст</div>
<div id="id24»>текст</div>
  • Вопрос задан
  • 476 просмотров
4 комментария
Подписаться 1 Простой 4 комментария
Решения вопроса 1
@dk-web
Кавычки поставьте в дивах после цифы правильно и все будет работать..
<div id="id24"»>текст</div>
и в качестве легкой оптимизации... добавьте каждому div класс. Например myClass
<div id="id1" class="myClass"»>текст1</div>
        <div id="id2" class="myClass"»>текст2</div>
    ...
        <div id="id24" class="myClass"»>текст24</div>

и тогда скрипт и стили у вас будут следующие
<style>
.myClass {display:none;}
</style>
<script>
function showBlock(val){
        x = document.getElementsByClassName('myClass');
            for (let i = 0; i < x.length; i++) {
                x[i].style.display='none';
            }
        document.getElementById('id'+val).style.display='block';
    }
</script>

все посимпатичнее)
п.с. все для вас
рабочий фиддл
Ответ написан
8 комментариев
8 комментариев
Пригласить эксперта
Ответы на вопрос 1
Stalker_RED
@Stalker_RED
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
DevOps задачи, работа с Yandex Cloud и Yandex Database
19 апр. 2024, в 18:38
1500 руб./в час
Верстка сайта -4-5 страниц
19 апр. 2024, в 18:36
1500 руб./за проект
MiniApp для телеграмм на React
19 апр. 2024, в 18:36
30000 руб./за проект
Ещё заказы