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

Question

[a9332]

Есть выпадающий список.
При активации пункта из списка отображается определенный текст.
Если выбрать один пункт, а затем выбрать другой (не по порядку), то первый не исчезает.
Как заставить пункты из предыдущего выбора исчезнуть?

<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>

Comments

[aleks-th]

может таки для начала
кавычки правильные проставить ?

[Рональд Макдональд]

Вот это треш. Надеюсь, вы просто начинающий.

[marsdenden]

Какой кошмар.

[a9332]

Рональд Макдональд, так и есть)

Answer 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>

все посимпатичнее)
п.с. все для вас
рабочий фиддл

Comments

[a9332]

не помогло(

[dk-web]

a9332, у меня все работает. Смотрите внимательнее.

[a9332]

Работает, я не спорю, но у меня к вам просьба)
Попробуйте выбрать из выпадающего списка по очереди: 2, 24, 6.
Должно отображаться только одно значение, а получаются все, т.е. предыдущий выбор не удаляется

[dk-web]

a9332, смотрите фиддл. добавил в ответ

[olya_097]

a9332, если Вам помогли- отмечайте ответ

[a9332]

Да, вы правы, там все работает.
Я пыталась использовать этот код в моторе. Возможно нужно поискать другое решение для мотора..
Вам спасибо

[dk-web]

a9332, простите, но что есть мотор? что не работает то у вас? опишите полнее тогда что ли.

[a9332]

сработало. Век буду признательна!)
Мотор - конструктор

Answer 2

[Stalker_RED]