JavaScript Event Listener triggering without calling

Question

i am trying to make a ui form in which when a user selects an answer/option then, the next question will appears after changing value of input, for this purpose i have added event listener using forEach loop.

Here is the 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>

and the 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();
}) )

as soon as i click the option for first question, window gets scrolled into the third question, instead of the second. when i debugged the problem with console.log i came to know both the event triggers are running at once as i hit options for first question

It's Element.addEventListener() not addEventListener(). Both work but the second version is equivalent to window.addEventListener() — Andreas
– Andreas, Commented Apr 22, 2020 at 16:04

palaѕн · Accepted Answer · 2020-04-22 16:04:15Z

This happens because you need to add the events to each element like:

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

Instead of making it global like:

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>

thanks palash, but i want to know why forEach loop is triggering for variable b also at the same time for var a.
That's because you have assigned the same change event listener for both a and b. So, if a change occurs the event listener calls the respective event handlers simultaneously.

Collectives™ on Stack Overflow

JavaScript Event Listener triggering without calling

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related