На странице есть много кнопок, как сделать так, что бы по нажатию на нее высвечивался нужный контент?

Question

[StepsOnes]

Есть кнопка с номером телефона, по нажатию выскакивает форма, после отправки формы появляется сообщение о благодарности.

Comments

[Danny Arty]

Примеров в интернете пруд пруди. Искать пробовали? Что именно не получается?

[StepsOnes]

Danny Arty, вывести сообщение о "Вскоре вам перезвоним". Форму вывожу nextElementSibling, а сообщение не знаю как вывести

[defriz]

StepsOnes, можно сообщению расположение в ксс задать и поставить opacity: 0 и transition немного. а по нажатию кнопки поставить opacity: 1 и сообщение появится плавно.

[StepsOnes]

defriz, с этим проблем нету, как мне это на js реализовать?

[defriz]

StepsOnes,

document.getElementById('button').addEventListener('submit', function () {
    document.getElementById('message').style.opacity = 1;
    setTimeout(() => {
        document.getElementById('message').style.opacity = 0;
    }, 3000); 
}, false);

[StepsOnes]

defriz, таких кнопок много, не прокатит по id

[StepsOnes]

defriz,

<div class="contacts-btn__block">
            <button id="contacts-btn" class="contacts-btn">[phone] <img class="dropdown-arrow" src="../images/header/keyboard_arrow_white.svg" alt="arrow"></button>

            <div class="contacts-dropdown-form contacts-dropdown-form__header none">
                <form action=""></form>
                <input id="phone" class="dropdown-form__inp" type="tel" name="" placeholder="Ваш номер телефона">
                <input id="dropdown-form__btn" class="dropdown-form__btn" type="submit" value="Заказать обратный звонок">
            </div>

            <div class="js__box"></div>

            <div id="contacts-dropdown__box" class="contacts-dropdown__box contacts-dropdown__box__header none">
               <img src="../images/header/ring_volume.svg" alt=""> Вскоре мы вам перезвоним
            </div>

            </div>

const contactsBtn = document.querySelectorAll('.contacts-btn');
const contactsDropdownForm = document.querySelectorAll('.dropdown-form__btn');
const dropdownFormBtn = document.querySelectorAll('.dropdown-form__btn');
const contactsDropdownBox = document.querySelector('#contacts-dropdown__box');

for (let elem of contactsBtn){
    elem.addEventListener('click', function(){
        this.nextElementSibling.classList.toggle('none');
        this.classList.toggle('rotate');
        
    })
}

for (let elem of dropdownFormBtn ){
    elem.addEventListener('click', function(){
        // this.previousElementSibling.classList.toggle('none');
        this.nextElementSibling.classList.toggle('none');
        console.log(previousElementSibling)
    })
}

Answer 1

[Noder SS]

Не понятный вопрос. Повесить на каждую обработчик, или как?

Comments

[StepsOnes]

Да.

[Noder SS]

StepsOnes, так вешайте. Или что хотели? Тип показать, как?

[StepsOnes]

Ростик Кальченко, просто на каждую кнопку по моему не правильно обработчик вешать, каждой кнопке свой id давать что ли, так же не рационально, есть же более лучший способ я думаю

[Noder SS]

StepsOnes, да ну.для каждого действия свой обработчик. все правильно, да и не обязательно id, все рационально. Так все делают

[StepsOnes]

Ростик Кальченко, простотдействия кнопок оддинаковые, т.е для каждой кнопки давать свой уникальный класс/id и писать для каждой кнопки код? Разве нельзя это более легче сделать?