JavaScript Event Listener запускается без вызова

Question

Я пытаюсь создать форму пользовательского интерфейса, в которой, когда пользователь выбирает ответ / параметр, после изменения значения ввода появится следующий вопрос, для этого я добавил прослушиватель событий, используя forEach l oop.

Вот HTML

  <div id="one">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <input type="radio" id=q1op1 name="q1" value="1"><label for="q1op1">Option 1</label>
        <input type="radio" id=q1op2 name="q1" value="2"><label for="q1op2">Option 2</label>
        <input type="radio" id=q1op3 name="q1" value="3"><label for="q1op3">Option 3</label>
        <input type="radio" id=q1op4 name="q1" value="4"><label for="q1op4">Option 4</label>
    </div>

    <div id="two">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

        <input type="checkbox" id=q2op1 name="q2" value="1"><label for="q2op1">Option 1</label>
        <input type="checkbox" id=q2op2 name="q2" value="2"><label for="q2op2">Option 2</label>
        <input type="checkbox" id=q2op3 name="q2" value="3"><label for="q2op3">Option 3</label>
        <input type="checkbox" id=q2op4 name="q2" value="4"><label for="q2op4">Option 4</label>

    </div>


        <div id="three">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>

        <input type="checkbox" id=q3op1 name="q3" value="1"><label for="q3op1">Option 1</label>
        <input type="checkbox" id=q3op2 name="q3" value="2"><label for="q3op2">Option 2</label>
        <input type="checkbox" id=q3op3 name="q3" value="3"><label for="q3op3">Option 3</label>
        <input type="checkbox" id=q3op4 name="q3" value="4"><label for="q3op4">Option 4</label>

    </div>

и javascript

var a=document.querySelectorAll('#one input');
var b=document.querySelectorAll('#two input');

a.forEach(element=>addEventListener('change', function(){
    document.getElementById('two').scrollIntoView();
}) )


b.forEach(element=>addEventListener('change', function(){
    console.log('hello');
    document.getElementById('three').scrollIntoView();
}) )

, как только я нажимаю на опцию для первого вопроса, окно прокручивается в третий вопрос, а не второй. Когда я отладил проблему с console.log, я узнал, что оба триггера событий работают одновременно, когда я нажал опции для первого вопроса

Answer 1

Это происходит потому, что вам нужно добавить события к каждому элементу, например:

element => element.addEventListener('change', function() {

Вместо того, чтобы сделать его глобальным, например:

element => addEventListener('change', function(){

var a = document.querySelectorAll('#one input');
var b = document.querySelectorAll('#two input');

a.forEach(element => element.addEventListener('change', function() {
  document.getElementById('two').scrollIntoView();
}))

b.forEach(element => element.addEventListener('change', function() {
  console.log('hello');
  document.getElementById('three').scrollIntoView();
}))

<div id="one">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <input type="radio" id=q1op1 name="q1" value="1"><label for="q1op1">Option 1</label>
  <input type="radio" id=q1op2 name="q1" value="2"><label for="q1op2">Option 2</label>
  <input type="radio" id=q1op3 name="q1" value="3"><label for="q1op3">Option 3</label>
  <input type="radio" id=q1op4 name="q1" value="4"><label for="q1op4">Option 4</label>
</div>
<div id="two">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <input type="checkbox" id=q2op1 name="q2" value="1"><label for="q2op1">Option 1</label>
  <input type="checkbox" id=q2op2 name="q2" value="2"><label for="q2op2">Option 2</label>
  <input type="checkbox" id=q2op3 name="q2" value="3"><label for="q2op3">Option 3</label>
  <input type="checkbox" id=q2op4 name="q2" value="4"><label for="q2op4">Option 4</label>

</div>


<div id="three">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <input type="checkbox" id=q3op1 name="q3" value="1"><label for="q3op1">Option 1</label>
  <input type="checkbox" id=q3op2 name="q3" value="2"><label for="q3op2">Option 2</label>
  <input type="checkbox" id=q3op3 name="q3" value="3"><label for="q3op3">Option 3</label>
  <input type="checkbox" id=q3op4 name="q3" value="4"><label for="q3op4">Option 4</label>

</div>