JS! slider, bestes Vorgehen

#1

Hallo,
also ich hab im HTML einen slider, der ausschließlich mit “echten” JS gesteuert werden soll.

var ta = document.getElementById('t1');
var slider = document.getElementById('i1');
var button = document.getElementById('i2');
var planets = true;
slider.oninput = function() {
  var divs = document.getElementsByClassName('t1');
  var counter = 0;
  for (var i = divs.length - 1; i >= 0; i--) {
    var div = divs[i];
    var dis = parseInt (div.getAttribute('dis'));
    var planet = div.getAttribute('planet');
    if (dis > this.value || !planets && planet) {
      div.style.display = 'none';
    } else {
      div.style.display = '';
      counter++;
    }
  }
  ta.value = this.value + ' -> ' + counter;
};

function b1() {
  if (button.value == 'Toggle Planet (on)') {
    button.value = 'Toggle Planet (off)';
    planets = false;
  } else {
    button.value = 'Toggle Planet (on)';
    planets = true;
  }
  slider.oninput();
}

Ich beschreib kurz was es tun soll:
1 der slider ist auf 1bis100 eingestellt,
2 der value ist anfangs 100,
3 wenn der slider verstellt wird, so wird oninput aufgerufen,
4 oninput filtert eine Liste,
5 oninput “läuft” rückwärts über die zu filternde Liste,
6 wenn dis>value oder keine planets, aber planet, dann filtere,
7 parseInt bei Vergleich von float und int?,
8 i2 ist ein butten und b1 die Funktion dazu,
9 i2 und b1 sind zusätzliche Filter,
10 sind alle Names richtig?

Ja und meine Frage wäre eben ob das so “richtig” ist?

0 Likes

#2

Ach ich Idiot,
true ist nicht gleich true und false ist nicht gleich false,
man muss diese Zeile anpassen:

var planet = div.getAttribute('planet') == 'true' ? true : false;

Es gibt dafür aber auch noch FÜNF andere Möglichkeiten. :thinking:

Testet das mal Bitte mit 200 Einträgen: (neue Benutzer dürfen keine Dateien hochladen)

https://file.io/dk5LKZ

Entpacken, im Zip ist die Datei temp-1138988366.html, doppelklick darauf. Und vergewissert euch, dass die ebenfalls im Zip enthaltene JS inlineFile.js harmlos ist.

Edit: Der Link funktioniert nicht, deswegen https://ufile.io/oflj4

0 Likes