nicht angemeldet
Moin Alois,
<!DOCTYPE html> <html>
Das Gradzeichen ° ist außerhalb des ASCII-Zeichensatzes, weshalb es sinnvoll sein kann, im head die Codierung deines Dokuments anzugeben. Default ist in HTML ISO-8859-1.
<body> <h2>Slider to JS-Var</h2> <label id=Xout></label><label id=Xout2></label>
Die Hauptüberschrift eines Dokuments sollte immer h1 sein und label ohne zugeordnete Formularelemente wirken auf mich falsch (siehe auch https://wiki.selfhtml.org/wiki/HTML/Elemente/label).
<br><br><br>
Zeilenumbrüche sind keine Spacing-Elemente.
<strong>
Das strong hat kein End-Tag und umschließt auch das Input.
<lable>Fußpunkt:</lable> <lable><input type="range" id="fpIn" min="-20" max="0" value="-12"><span>0</span></lable> <label> °C</lable>
Das Element heißt label und nicht lable und beschreibt das Formularelement – so wie Rolf vorgeschlagen hat – oder in der Form
<label>Fußpunkt:
<input type="range" id="fpIn" min="-20" max="0" value="-12">
<output aria-hidden="true"></output> °C
</label>
Das Zeichen mit dem Unicode-Point 202f ist ein schmales geschütztes Leerzeichen, wie es zwischen Zahlen und Einheiten verwendet wird.
const strOut=[]; var sliderFp = document.querySelector("input[type='range'][id='fpIn']");
Das Objekt kann doch auch const sein – und es wird ziemlich kompliziert ermittelt: "#fpIn" sollte vollkommen ausreichen, da die ID eindeutig sein muss, es darf also keine weiteren Elemente mit dieser ID geben.
sliderFp.addEventListener("change", function(){ document.querySelector("span").innerHTML = this.value; strOut[0]=this.value; document.getElementById("test1").innerHTML=strOut[0]; });
Neben dem change-Event träfe auch das input-Event zu. Aber das eigentliche Problem an der Stelle ist, dass es kein Element mit der ID test1 gibt. (Und getElementById kannst du natürlich auch anstelle von querySelector("#…") verwenden.)
document.getElementById("Xout").innerHTML=">>> ";document.getElementById("Xout2").innerHTML=strOut[0];
Das steht außerhalb des Event-Handlers, wird also nur einmal beim Abarbeiten des JavaScript-Codes ausgeführt. Und nach meinem Verständnis sollte man innerHTML gültigen HTML-Code zuweisen, dafür müsstest du doch die spitzen Klammern kontextgerecht behandeln. Aber in deinem Fall reichte auch die textContent-Eigenschaft vollkommen aus.
Viele Grüße
Robert
Rolf B
Der Martin