title: addEventListener onchange dropdown selected value Javascript
body: <p>I am trying to run 2 functions according to the value selected by drop-down box.</p>
  
  <p>Code:</p>
  
  <pre class="lang-js prettyprint-override"><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);
    }
  });
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="door-stand"&gt;
    &lt;label&gt;Select the stand type:&lt;/label&gt;
    &lt;select id="stand"&gt;
      &lt;option class="stand1" value="stand1"&gt; Stand 1 &lt;/option&gt;
      &lt;option class="stand2" value="stand2"&gt; Stand 2 &lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The issue is even-though the values from the drop-down list keep changing, any of the above functions ain't trigger.</p>
  
  <p>I tried to print something when the value changed in drop-down list; but, anything did not print at all.</p>
  
  <hr>
  
  <p>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 </p>
  
  <blockquote>
    <p>wallMaterial not defined</p>
  </blockquote>