addEventListener onchange dropdown ausgewählten Wert Javascript

Ich versuche zu laufen 2 Funktionen entsprechend der eingestellten Zahl von 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>

Ist das Problem sogar-obwohl die Werte aus der drop-down-Liste verändern sich die oben genannten Funktionen nicht ausgelöst.

Habe ich versucht, etwas zu drucken, wenn der Wert geändert, wird in der drop-down-Liste; aber alles, was nicht drucken überhaupt.


Es ist eine Konsole, Fehler beim ändern der Werte in der drop-down-Menü. Die Konsole Fehler erscheint nur, wenn Sie die Werte ändern. Das ist, warum ich noch nicht bemerkt. Es sagt

wallMaterial nicht definiert

  • Haben Sie überprüft, die browser-Konsole für Fehler? Wenn nicht, dann schlage ich vor, Sie tun.
  • Ja, ich eigentlich Tat. Es wurden keine Fehler in der Konsole.
  • Wo ist dein JavaScript-Datei verbunden, die in die HTML-Seite? In der <head> oder irgendwo in <body>? Wenn letzteres, ist es vor oder nach Ihrem <div id="door-stand"> element?
  • Getestet habe ich ohne die Mesh-Funktionen, und es ist mit kein problem. Wahrscheinlich ist etwas passiert, mit Mesh-Funktionen, sollten Sie die Konsole.
  • FYI, activities.options[activities.selectedIndex].value vereinfacht werden können, um nur activities.value.
  • Wenn das das problem wäre er eine Fehlermeldung über den Aufruf addEventListener auf null.
  • Dein code funktioniert hier, also müssen Sie etwas tun, dass Sie haben nicht gezeigt, uns in Ihrem code.
  • ja, ich weiß, aber ich weiß nicht ganz glauben, dass OP hat keine Fehler
  • auch die OP vergessen haben, der link zu der JS-Datei, die würde es sicherlich schaffen, die Symptome beobachtet 😀
  • Ich jedenfalls habe die JS-Datei am Anfang der index-Datei. Ich habe gerade was das Problem ist. Es ist eine Konsole, Fehler beim ändern der Werte in der drop-down-Menü. Die Konsole Fehler erscheint nur, wenn Sie die Werte ändern. Das ist, warum ich noch nicht bemerkt. Es sagt „wallMaterial nicht definiert“. Ich werde versuchen, dieses Problem zu beheben. Vielen Dank für deine Hilfe!

InformationsquelleAutor Simon | 2018-06-25



2 Replies
  1. 4

    Wie Sie sehen können, nach dem entfernen aller unnötigen code, dieser einfachen snippet funktioniert wie erwartet:

    JS:

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

    HTML:

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

    Dies bedeutet, dass es möglicherweise ein anderes Problem in deinem code:

    • Vielleicht etwas erroring:

      JS:

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

      HTML:

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

    • Vielleicht haben Sie einige andere change – Listener aufrufen - Ereignis.stopImmediatePropagation():

      JS:

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

      HTML:

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

    • Damit dieser post nicht wirklich das problem lösen. Ich würde empfehlen, dass Sie die post in den Kommentaren, da diese noch nicht behoben oder erklärt die aktuelle Ausgabe.
    • Nach dem Titel und ich habe versucht, etwas zu drucken, wenn der Wert geändert, wird in der drop-down-Liste; aber alles, was nicht print at all es scheint mir, dass wenigstens dies hilft zu zeigen, was/wo die Ursache des Problems sein könnte, und der Nachweis, dass durch ein wirklich einfaches Beispiel.
    • „Vielleicht ist etwas erroring“ <- OP sagt, es gibt keine Fehler (obwohl ich bin nicht ganz davon überzeugt). Schönes Beispiel mit den Auswirkungen stopImmediatePropagation()
    • OP hat bestätigt, es ist ein Fehler so Ihren ersten Punkt-der Punkt ist direkt auf das Geld
  2. 0

    Können Sie this.value rufen Sie den Wert der gewählten option innerhalb der callback-Funktion:

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.