addEventListener onchange dropdown selected value Javascript

Question

I am trying to run 2 functions according to the value selected by drop-down box.

Code:

var activities = document.getElementById("stand");
activities.addEventListener("change", function() {

  if (activities.options[activities.selectedIndex].value == "stand1") {
    var footRight = new THREE.Mesh(new THREE.BoxGeometry(.040, 0.55, 0.05), wallMaterial);
    partitionLeft.add(footRight);
    footRight.position.set(-0.12, -0.11, 2);
  } else {
    var footRight = new THREE.Mesh(new THREE.BoxGeometry(.040, 0.55, 0.05), wallMaterial);
    partitionLeft.add(footRight);
    footRight.position.set(-4.12, -8.9, 6);
  }
});

<div id="door-stand">
  <label>Select the stand type:</label>
  <select id="stand">
    <option class="stand1" value="stand1"> Stand 1 </option>
    <option class="stand2" value="stand2"> Stand 2 </option>
  </select>
</div>

The issue is even-though the values from the drop-down list keep changing, any of the above functions ain't trigger.

I tried to print something when the value changed in drop-down list; but, anything did not print at all.

---

There is a console error when I change the values in the drop-down. The console error pops up only when changing the values. That's why I haven't noticed. It says

wallMaterial not defined

Answer 1

As you can see, after removing all the unnecessary code, this simple snippet works as expected:

const activities = document.getElementById('stand');

activities.addEventListener('change', (e) => {
  console.log(`e.target.value = ${ e.target.value }`);
  console.log(`activities.options[activities.selectedIndex].value = ${ activities.options[activities.selectedIndex].value }`);
});

<select id="stand">
  <option class="stand1" value="stand1">Stand 1</option>
  <option class="stand2" value="stand2">Stand 2</option>
</select>

This means there might be something else wrong in your code:

• Maybe something is erroring out:

  const activities = document.getElementById('stand');
  
  activities.addEventListener('change', (e) => {
    console.log('Change START');
    
    activities.nonexistentFunction();  
    
    console.log('Change END');
  });

  <select id="stand">
    <option class="stand1" value="stand1">Stand 1</option>
    <option class="stand2" value="stand2">Stand 2</option>
  </select>

• Maybe you have some other change listeners that are calling Event.stopImmediatePropagation():

  const activities = document.getElementById('stand');
  
  activities.addEventListener('change', (e) => {
    e.stopImmediatePropagation();
    
    console.log('Change 1');
  });
  
  activities.addEventListener('change', (e) => {  
    console.log('Change 2');
  });

  <select id="stand">
    <option class="stand1" value="stand1">Stand 1</option>
    <option class="stand2" value="stand2">Stand 2</option>
  </select>