nicht angemeldet
Rolf BHallo Alois,
Die Zuweisung an strOut[0] funktioniert prima.
Was nicht funktioniert - was Du erkennen würdest, wenn Du mal die Entwicklerwerkzeuge des Browsers aufmachst, einen Breakpoint bei der Zuweisung setzt und dann schrittweise weiterläufst - ist die Zuweisung an das innerHTML eines Elements mit der ID test2. Denn dieses Element gibt's nicht.
Damit möchtest Du an die Eigenschaft innerHTML von null etwas zuweisen, und das bricht dein Script ab.
Wenn es Dir darum geht, dass beim ersten Aufruf der Seite die Zuweisung von strOut[0] an das Xout2 Element keinen Effekt hat - das liegt daran, dass zu diesem Zeitpunkt noch nichts an strOut[0] zugewiesen ist. Das passiert erst, wenn das erste change-Element ausgelöst wird. D.h. du musst beim Seitenstart - außerhalb des Eventhandlers - den Sliderwert einmalig ins Ausgabeelement übertragen.
Weitere Hinweise:
- Das lable Element gibt's nicht. Ein label ist ein label, egal ob amerikanisches oder britisches Englisch
document.querySelector("input[type='range'][id='fpIn']")- kann man machen, ist aber unnötig kompliziert. Eine ID muss im HTML Dokument eindeutig sein, und deshalb kannst Du hier auchdocument.querySelector("#fpIn")oderdocument.getElementById("fpIn")verwenden. Achte auf die Verwendung des # Zeichens. In querySelector muss es hinein, weil dort ein CSS Selektor verwendet wird und darin werden IDs mit einem # markiert.- Nicht jedes Textelement ist ein Label. Manchmal ist es auch einfach ein <span> oder <div> - oder in deinem Fall ein <output> Element, wenn Du dorthin Werte ausgibst.
- Ein Label beschriftet ein Eingabeelement. Damit das funktioniert, benötigt das Eingabeelement eine ID und diese ID muss im for-Attribut des Labels angegeben werden. Beispiel folgt.
- Die Verwendung von strong oder b nur für den Zweck, Fettschrift zu erzeugen, ist falsch. Diese beiden Elemente tragen eine inhaltliche Aussage ("Semantik") und bei Dir liegt weder die Semantik für <b> (bring attention to element) noch für <strong> (strong importance) vor. Ja, ich weiß, <b> wurde früher als "bold" verstanden. Aber das ist aus der Zeit von HTML 3.2. Wenn es Dir nur um Fettschrift geht, ist CSS angesagt.
- Die Eigenschaft innerHTML dient dazu, einem Containerelement eine neue, innere HTML Struktur zuzuweisen, also Text mit HTML Markup darin. Um einfache Textausgaben zu machen, ist es ungeeignet. Mit etwas Pech enthält der normale Text Zeichen, die wie HTML Markup aussehen, und es zerreißt einem das Layout. Für normale Textausgaben verwendet man heute die textContent Eigenschaft.
- Die Seitenüberschrift sollte h1 sein, nicht h2. Wenn Dir die Schrift dafür zu groß ist, stelle mit CSS eine andere ein.
- Die Angabe °C gehört nicht in ein Label. Es ist zwar eine Form von Beschriftung, aber keine, die eine Aussage über die Bedeutung des beschrifteten Elements macht. Ich überlege sogar, ob die Zahlenwertdarstellung des Sliders vor Assistenztechniken (die auf ein Label angewiesen sind) verborgen werden müsste (mit dem Attribut aria-hidden="true"), denn ein Screenreader dürfte den Wert des Sliders ohnehin ansagen. Und dafür ist dann die Beschriftung "Fußpunkt" auch nicht hinreichend, da muss mehr Erklärung hinzu. Da Du hier aber, wie es aussieht, eine Beispielseite baust, gibt es zu wenig Kontext, um die richtige Einbindung von Assistenztechniken diskutieren zu können. Das ist leider die Crux im Web - du baust deine Seiten nicht nur für einen sehenden User mit zwei funktionierenden Händen, der vor einem Desktop-Monitor sitzt. Eine zugängliche Seite berücksichtigt auch Menschen, die blind sind, und beachtet auch Touchscreen, Tastatur und Spracheingabehelfer als Eingabe. Die Browser nehmen Dir dafür schon viel ab. Aber ein paar Dinge gilt es trotzdem zu beachten. Das macht die Sache leider komplexer und die meisten Beispiele im Web ignorieren das.
Als Minimalbeispiel würde ich das so bauen:
<!DOCTYPE html>
<html>
<head>
<style>
label[for=fpIn] {
font-weight:bold;
}
</style>
</head>
<body>
<h1>Slider to JS-Var</h1>
<div>
<label for="fpIn">Fußpunkt:</label>
<input type="range" id="fpIn" min="-20" max="0" value="-12">
<output aria-hidden="true">0</output> °C
</div>
<script>
const sliderFp = document.querySelector("#fpIn");
const sliderOut = document.querySelector("#fpIn + output");
sliderFp.addEventListener("input", function() {
sliderOut.textContent = sliderFp.value;
});
sliderOut.textContent = sliderFp.value;
</script>
</body>
</html>
- Die Debug-Zeile mit >>> und Temperatur habe ich weggenommen. Wenn Du die haben willst, kannst Du das ">>>" auch im HTML notieren.
- Das °C braucht kein Element, worin es steht
- Den Fettsatz für Fußpunkt erfolgt über eine CSS Regel, im style-Element. Ich identifiziere das richtige Label über sein for-Attribut.
- Für das Ausgabeelement für den Temperaturwert habe ich das output Element verwendet. Um es im DOM zu finden, verwende ich den Nachbar-Kombinator +. Der Selektor
#fpIn + outputfindet ein output-Element, das direkt auf ein Element mit ID fpIn folgt.
Rolf
--
sumpsi - posui - obstruxi
sumpsi - posui - obstruxi
Der Martin