JavaScript: slider value verwenden?

Wieso geht das JavaScript nicht? Das output-Feld bleibt leer.

var slider = document.getElementById("lengthRange");
var output = document.getElementById("length");

if (slider == 1) {
  output.innerHTML = 'Schwach';
}

if (slider == 2) {
  output.innerHTML = 'Mittel';
}

if (slider == 3) {
  output.innerHTML = 'Stark';
}

Answer 1

[regex9]

getElementById gibt ein Element zurück. Dieses mit einer Zahl zu vergleichen, ist nicht sinnvoll.

Generell könnte hier ein switch-case passender sein (oder zumindest if-else if, um nicht jede Überprüfung mitzunehmen, selbst wenn sie längst überfällig ist).

Da zudem nur Textknoten gesetzt werden, wäre das Setzen von innerText die bessere Wahl.

var slider = document.getElementById("lengthRange");
var output = document.getElementById("length");
output.innerText = slider.value;

switch (slider.value) {
  case 1:
    output.innerText = "Schwach";
    break;
  case 2:
    output.innerText = "Mittel";
    break;
  case 3:
    output.innerText = "Stark";
    break;
}

Oder der letzte Teil noch kürzer:

const levels = [ "Schwach", "Mittel", "Stark" ];
output.innerText = levels[slider.value - 1];

Comments

[regex9]

PS.: Wenn output aber tatsächlich ein (Eingabe-)Feld ist, muss natürlich das value-Property gesetzt werden, nicht innerText.

Answer 2

[Dijkstra3006]

Versuchs mal so:

var slider=document.getElementById("lengthRange");
var output=document.getElementById("length");
output.innerHTML=slider.value;

if(slider.value == 1)
  output.innerHTML='Schwach';
if(slider.value == 2)
  output.innerHTML='Mittel';
if(slider.value == 3)
  output.innerHTML='Stark';

Um die Range zu returnen, benötigst du slider.value ;)

Woher ich das weiß: eigene Erfahrung