Anzeige Wert von "Eingabebereich" in einem anderen Element gibt "undefined"

Question

Dies wurde zuvor gefragt, aber ich habe keine solide, funktionierende, plain JS-Lösung gefunden, alle Lösungen da draußen sind mit Frameworks oder einfach nicht funktionieren.

Ich möchte einfach den Wert eines Eingangs "Bereich" Werte erhalten und sie in einem Span-Element angezeigt haben.

Ich bekomme undefined ohne Fehler in der Konsole.

Hier ist der JS-Code:

document.getElementById("height").addEventListener("input", 
sliderChange(this.value)); 

function sliderChange(val) { 
document.getElementById('yourHeight').innerHTML = val; 
} 

Des Weiteren möchte ich die Benutzereingabe zu speichern und für eine andere Funktion verwenden, um die endgültigen Ergebnisse zu berechnen (diese Funktion noch nicht da ist). Hier

ist der Link:

https://codepen.io/damianocel/pen/ZyRogX

Answer 1

In diesem Code document.getElementById("height").addEventListener("input", sliderChange(this.value)), this bezieht sich auf die globale window Objekt und nicht das Eingangs , deshalb ist this.valueundefined.

Sie benötigen eine listener Callback-Funktion zum addEventListener passieren, damit es seinen eigenen Umfang haben und this auf Ihre input beziehen:

document.getElementById("height").addEventListener("input", function(){ sliderChange(this.value)}); 

Dies ist die updated working Demo ist.

Answer 2

Sie benötigen eine Funktion addEventListener weitergeben müssen:

document.getElementById("height").addEventListener("input", function() { sliderChange(this.value) });