html - addEventListener onchange dropdown selected value Javascript

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

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

Share Improve this question edited Jun 26, 2018 at 0:46 Phil 165k25 gold badges262 silver badges267 bronze badges asked Jun 25, 2018 at 23:54 Simon 3052 gold badges6 silver badges18 bronze badges

2 Have you checked the browser console for errors? If not then I suggest you do that. – NewToJS Commented Jun 25, 2018 at 23:57
@NewToJS Yeah, I actually did. There were no errors in the console. – 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 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 Commented Jun 26, 2018 at 0:10
1 @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 Commented Jun 26, 2018 at 0:41

| Show 5 more ments

2 Answers 2

Sorted by: Reset to default 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>

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);
    });

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - addEventListener onchange dropdown selected value Javascript - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)