Как в зависимости от выбранного option'а добавлять различные кнопки?

Question

[Vladduk]

Есть select, у которого два option, хочу чтобы при нажатии на один option добавлялись или появлялись две кнопки с определенными названиями, а при нажатии второго option первые кнопки пропадали и добавляли другие 6 кнопок со своими названиями. https://codepen.io/ilya1707/pen/rNdPVJp

Comments

[ThunderCat]

то есть тупо приплюсовать определенное количество кнопок не позволяют слабые скилы в арифметике?

Answer 1

[ThunderCat]

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

Comments

[Vladduk]

Спасбо

Answer 2

[DAGorbachev]

Поступите проще.

Сделайте два скрытытх блока.
В одном - две кнопки.
Во втором - шесть кнопок.

По событию change принимайте значение option, скрывайте оба блока, и показывайте нужный.

<select id ="select">
        <option value="1">2 кнопки</option>
        <option value="2">5 кнопок</option>
    </select>
    <div id="btns-1" class="btns" style="display: none;">
        <button style="background-color: #bad;">lorem</button>
        <button style="background-color: #bad;">lorem</button>
    </div>
    <div id="btns-2" class="btns" style="display: none;">
        <button style="background-color: #def;">lorem</button>
        <button style="background-color: #def;">lorem</button>
        <button style="background-color: #def;">lorem</button>
        <button style="background-color: #def;">lorem</button>
        <button style="background-color: #def;">lorem</button>
    </div>

const select = document.querySelector('#select');
const handleSelectChange = e => {
    let btns = document.getElementsByClassName('btns');
    for (let index = 0; index < btns.length; index++) {
        btns[index].style.display = 'none';
    }
    let value = e.target.value;
    let current = document.getElementById('btns-'+value);
    current.style.display = 'block';
}
select.addEventListener('change', handleSelectChange);

Тольку лучше меняйте отображение не стилями классами.

Comments

[Vladduk]

Thx :D