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

Have you checked the browser console for errors? If not then I suggest you do that. — NewToJS
– NewToJS, Commented Jun 25, 2018 at 23:57
@NewToJS Yeah, I actually did. There were no errors in the console. — Simon
– Simon, Commented Jun 26, 2018 at 0:04
Where is your JavaScript file linked into the HTML page? In the <head> or somewhere in <body>? If the latter, is it before or after your <div id="door-stand"> element? — Phil
– Phil, Commented Jun 26, 2018 at 0:08
I tested without the Mesh functions, and it's having no problem. Probably something happens with Mesh functions, you should check the console. — Liang
– Liang, Commented Jun 26, 2018 at 0:10
@Phil I certainly did include the JS file at the beginning of the index file. I just got what the issue is. 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". I'll try to fix this issue. Thanks for your assistance! — Simon
– Simon, Commented Jun 26, 2018 at 0:41

Danziger · Accepted Answer · 2018-06-26 00:39:23Z

7

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>

edited Jun 26, 2018 at 0:39

answered Jun 26, 2018 at 0:10

Danziger

21.4k6 gold badges59 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

NewToJS Over a year ago

So this post doesn't really solve the problem. I would recommend you post into the comments section since this hasn't fixed or explained the current issue.

Danziger Over a year ago

@NewToJS According to the title and to I tried to print something when the value changed in drop-down list; but, anything did not print at all it seems to me that this, at least, helps to point out what/where the cause of the problem might be and provide evidence of that through a really simple working example.

Phil Over a year ago

"Maybe something is erroring out" <- OP says there are no errors (though I'm not entirely convinced). Nice example showing the effects of stopImmediatePropagation()

Phil Over a year ago

OP has confirmed there is an error so your first dot-point is right on the money

ttfreeman · Accepted Answer · 2019-05-05 00:56:25Z

0

You can use this.value to access the value of selected option inside your callback function:

   document.getElementById('stand').onChange = function(){  
        console.log(this.value);
    });

answered May 5, 2019 at 0:56

ttfreeman

5,5994 gold badges31 silver badges35 bronze badges

Collectives™ on Stack Overflow

addEventListener onchange dropdown selected value Javascript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related