ForEach()

Beispiel

Ein Beispiel aus de Praxis mit Slidern <input type="range"> Elementen und Wertanzeige im nachfolgenden Element

rot

grün

blau

      document.querySelectorAll( 'input[type="range"]' ).forEach( slider =>
      {
      slider.addEventListener( 'input', function ()
      {
      // Wir suchen das Element, das direkt nach dem Slider kommt (z.B. ein output oder span)
      const display = this.nextElementSibling;
      if ( display )
      {
      display.textContent = this.value;
      }
      } );
      } );
    

Info

Wir haben hier ein Script welches die foreach Schleife nutzt, um Arrayelemente zu durchlaufen.

In diesem Beispiel besteht das Array aus einigen Slidern.
<input type="range"> <span> </span>

Die Slider kommen in ein Array mittels

        document.querySelectorAll( 'input[type="range"]' )
      

Dann kann man die foreach() Schleife direkt anhängen. Darin liegt eine Arrow-Funktion die jedem Slider einen Eventlistener zuweist. Der Event-Listener ruft eine Funktion, welche dem direkt nachfolgendem Element des input Felds den Wert des input Feldes zuweist.