OldSchool1705
@OldSchool1705
I want to become a programmer

Как сбросить display none?

Вопрос всё ещё актуален , если кто может помогите понять в чём проблема, что то не получается решить
Всем привет , делаю квиз на swiper js, там есть 4 пункта , при выборе одного из пунктов включается display block и следующий свайп будет с этой информацией , но если я нажимаю назад и выбираю другой вариант то тот тоже становиться
display block и на следующем свайпе они в 2 стоят два блока друг под другом как убрать это ?

спасибо за помощь .
<div class="popup popup-form-two">
        <div class="container__step">
            <form name="form">
                <div class="swiper-container swiper-container-sub">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
           
                            <!-- form 1 -->
                            <div class="form" name="form">

                                <div class="container__step__header">
                                    <h3>расчет стоимости</h3>
                                    <div id="close" class="close close__sub"></div>

                                </div>
                                <div class="container__step__main">
                                    <div class="container__step__flex">
                                        <div>
                                            <h4>Куда вы планируете устанавливать окна</h4>
                                        </div>
                                        <div class="media__with__sub">
                                            <label> 
                                            <img src="img/stepone/1.jpg" alt="stepone">
                                            <div class="input__form__flex">
                                            <input id="allow_one" class="check__one" name="where" type="radio" data-form="formOne" > 
                                         <span>Квартира</span>
                                        </div>
                                    </label>
                                        </div>
                                        <div class="media__with__sub">
                                            <label><img src="img/stepone/2.jpg" alt="stepone">
                                            <div class="input__form__flex">
                                                <input id="allow" name="where" type="radio" data-form="formTwo">
                                                <span>Частный дом</span>
                                            </div></label>
                                        </div>
                                        <div class="media__with__sub">
                                            <label><img src="img/stepone/3.jpg" alt="stepone">
                                            <div class="input__form__flex">
                                                <input id="allow_two" name="where" type="radio" data-form="formThree" ><span>Дача</span>
                                            </div></label>
                                        </div>
                                        <div>
                                            <label>
                                            <img src="img/stepone/4.svg" alt="stepone">
                                        <div class="input__form__flex">
                                            <input name="whereSub"  type="radio" ><span>Остекление балкона</span>
                                        </div>
                                        </label>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="container__step__flex__sub">
                                            <div class="container__step__title">
                                                <p>После опроса вы сможете<br> выбрать один из подарков:</p>
                                            </div>
                                            <div><img src="img/123.jpg" alt=""></div>
                                            <!-- <div><img src="img/stepsub/2.jpg" alt=""></div>
                                        <div><img src="img/stepsub/3.jpg" alt=""></div> -->
                                            <div class="container__step__bacground">
                                                <p>
                                                    Шаг 1 из 7
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="navigation navigation__one " id="nav__left">
                                    <div class="swiper-button-pre none__swip__pre"></div>
                                    <div class="swiper-button-nex" id="swiper__button">
                                        <input class="btn__sub" type="submit" id="submit" disabled value="Дальше &#8594;">
                                        <!-- <p>Дальше &#8594;</p> -->
                                        </input>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide">

это формы которые вызываются смотря какой пункт выбран в первой форме
                            <!-- form 2-1  -->
                            <div id="formOne" class="form form__two__one" name="form">
                                
                            <!-- form 2-2  -->
                            <div id="formTwo" class="form form__two__two" name="form">

                               
                            <!-- form 2-3  -->
                            <div id="formThree" class="form form__two__three" name="form">


var inputName = document.querySelectorAll('[name="where"]');

if (inputName) {
    inputName.forEach(function(el) {
        el.addEventListener('change', changeSlide);

    });
}
function changeSlide(evt) {
    var dataForm = evt.target.dataset.form;
    var form = document.querySelector("#" + dataForm);
    form.style.display = 'block';

}
  • Вопрос задан
  • 80 просмотров
Решения вопроса 1
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега JavaScript
CEO iAmStudio, предприниматель.
Создай класс со свойством display: none и включай\выключай его для нужных элементов.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы