HTML | JavaScript | CSS | NaN | Fehler?

1 Antwort

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, Technik, HTML
12.09.2021, 04:49

In deinem Skript tummeln sich mehrere Fehler.

1) Zwei Variablen sind nicht definiert (geldJahrm, vwm).

2) Hier:

vwm.innerHTM = "<h5>VW Bus pro Jahr 40...

fehlt dem Property innerHTML ein L.

3) Da du bei all deinen Slidern beim Auslesen ein m an das value-Property gehängt hast, erhältst du in jedem Fall den Wert undefined. Summiert zu einer Zahl ist das Ergebnis NaN.

4) Kein Fehler, aber uneinheitlich im Vergleich zu den anderen Slidern ist der Name der Klasse:

.rangem-input input

Im Anschluss würde ich dir noch empfehlen, die sich dauernd wiederholenden Codezeilen mittels Funktionen zusammenzufassen.

function setupRangeBox(input, label) {
  const start = parseInt(input.min);
  const end = parseInt(input.max);
  const step = parseInt(input.step);

  for (let value = start; value <= end; value += step) {
    label.innerHTML += `<div>${value}</div>`;
  }

  input.addEventListener("input", function() {
    const top = parseInt(this.value) / step * -40;
    label.style.marginTop = top + "px";
    update();
  });
}

Ob parseFloat statt parseInt bevorzugt werden sollte, würde ich einmal infrage stellen, immerhin trennst du für die Berechnungen die Kommastelle eh vorher ab.

Auch in der update-Funktion wären Verkürzungen möglich. Du parst die Werte der Eingabefelder immer wieder neu. Speichere diese Zwischenwerte doch stattdessen in Variablen.

Auf innerHTML würde ich zudem verzichten. Mit jeder Neuberechnung müssen bei dir mehrere h5-Elemente entfernt und dafür neue Elemente erstellt und in das DOM gehängt werden. Aufwand könnte eingespart werden, indem du die Elemente gleich direkt in das Markup mit den entsprechenden IDs schreibst. Den Text kannst du mit innerText oder textContent setzen. Würdest du das Element zudem aufteilen:

<h5>
  <span>Zeitersparnis pro ...</span>
  <span id="zeitMonatm"></span>
</h5>

Bräuchte nur der Textknoten verändert werden, der sich tatsächlich jedesmal ändert.

Und noch ein paar letzte Kommentare zu deinem Markup:

  • Die Entscheidung, die Rechnungen als Überschrift herauszurendern, finde ich etwas seltsam.
  • Die Auflistung der Werte deiner Eingabefelder wären vermutlich in einem label-Element, welches an das Eingabefeld geknüpft ist, am besten aufgehoben. Allerdings müsstest du dann span-Elemente statt div verwenden.
  • Die Zeilenumbrüche in deinem Fall sind eher etwas, was mit CSS umgesetzt werden sollte, denn in jedem Fall möchtest du lediglich Abstände zwischen Containern schaffen. Das br-Element ist für Zeilenumbrüche im Fließtext gedacht.