Вопрос всё ещё актуален , если кто может помогите понять в чём проблема, что то не получается решить
Всем привет , делаю квиз на 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="Дальше →">
<!-- <p>Дальше →</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';
}
Простой
