JavaScript事件监听器未调用而触发

Question

我正在尝试制作一种ui形式，当用户选择一个答案/选项时，下一个问题将在更改输入值之后出现，为此，我使用forEach循环添加了事件侦听器。

这里是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() {