I have an accordion. The first section is open by default, the others are closed, after I fill the first one opens the next, the filled section is closed. I use addEventListener (" input "() => to dynamically read the results. The problem is that when I fill the second section and want to go to section 3, section 2 is closed and then opened.
The problem is listening to addEventListener (" input "() => since it listens to all changes. But the fact is that after the second section is closed, the values in it do not change in any way.
How to solve this problem? I need to consistently open the sections, the filled ones are closed.
window.document.addEventListener("input", () => {
//check values
let agesValues =
age &&
age.value !== age.value.defaultValue &&
age.value !== null &&
age.value !== "";
if (
(agesValues === true && male.checked) ||
(agesValues === true && female.checked)
) {
let inpush = () => {
//show first section result
blockresult1.classList.add("visible");
//show second section inputs
sectondSection.classList.remove("collapse");
};
setTimeout(inpush, 2000);
}
if () {
if () {
//show secons section result
blockresult2.classList.add("visible");
//close the section when it is full
sectondSection.classList.add("collapse");
}
}
if (
my check
) {
) {
let inpush = () => {
changeButton3.classList.add("visible");
thirdSection.classList.add("collapse");
blockresult3.classList.add("visible");
my actions
};
setTimeout(inpush, 2000);
}
}.visible {
display: block;
}
.collapse {
display: none;
}<form class="stepTwo-profile" id="formStepTwo">
<p class="stepTwo-profile-title">Демография</p>
<div class="stepTwo-profile-item">
<a href="#" class="stepTwo-profile-item-change1">Изменить</a>
<div class="stepTwo-profile-result1">
<p class="stepTwo-profile-result1-text">
Возраст пациента:<span
class="stepTwo-profile-result1-text-sub"
id="resultAge"
></span>
</p>
<p class="stepTwo-profile-result1-text">
Пол:<span
class="stepTwo-profile-result1-text-sub"
id="resultGender"
></span>
</p>
</div>
<div id="firstsection">
<label for="age"
>Возраст пациента<input
type="number"
class="stepTwo-profile-item-textAge"
name="age"
min="0"
max="80"
maxlength="2"
id="age"
/></label>
<p class="stepTwo-profile-item-smTitle">Пол</p>
<label for="male">
<input type="radio" name="gender" id="male" value="male" />Мужской
<span class="stepTwo-profile-item-radionbtn"></span
></label>
<label for="female">
<input type="radio" name="gender" id="female" value="female" />Женский
<span class="stepTwo-profile-item-radionbtn"></span>
</label>
</div>
</div>
<p class="stepTwo-profile-title">Статус пациента и заболевания</p>
<div class="stepTwo-profile-item">
<a href="#" class="stepTwo-profile-item-change2">Изменить</a>
<div class="stepTwo-profile-result2">
<p class="stepTwo-profile-result2-text">
Предшествующая терапия:<span
class="stepTwo-profile-result1-text-sub"
id="trueTerapy"
></span>
</p>
<p class="stepTwo-profile-result2-text">
Общее состояние и коморбидность:<span
class="stepTwo-profile-result1-text-sub"
id="OverStatus"
></span>
</p>
</div>
<div id="sectondSection">
<p class="stepTwo-profile-item-smTitle">Предшествующая терапия</p>
<label for="prev-terapy1">
<input type="radio" name="prev-terapy" id="prev-terapy1" />Нет spa
<span class="stepTwo-profile-item-radionbtn"></span>
</label>
<label for="prev-terapy2">
<input type="radio" name="prev-terapy" id="prev-terapy2" />Радикальное
лечение завершено <span class="stepTwo-profile-item-radionbtn"></span>
</label>
<label for="prev-terapy3">
<input type="radio" name="prev-terapy" id="prev-terapy3" />Одна линия
терапии <span class="stepTwo-profile-item-radionbtn"> </span
></label>
<label for="prev-terapy4">
<input type="radio" name="prev-terapy" id="prev-terapy4" />Две или
более линии терапии
<span class="stepTwo-profile-item-radionbtn"></span>
</label>
<p class="stepTwo-profile-item-smTitle smTitleSecondsChilds">
Общее состояние и коморбидность
</p>
<label for="status1">
<input type="radio" name="status" id="status1" />ECOG 0-1
<span class="stepTwo-profile-item-radionbtn"></span
></label>
<label for="status2">
<input type="radio" name="status" id="status2" />ECOG 2
<span class="stepTwo-profile-item-radionbtn"></span
></label>
<label for="status3">
<input type="radio" name="status" id="status3" />ECOG 3-4 | высокая
коморбидность
<span class="stepTwo-profile-item-radionbtn"></span>
</label>
</div>
</div>
</form>It should be like this
What do I get after a couple of seconds
