Pascalsches Dreieck

So funktioniert das Script

Das Script besteht aus zwei klar getrennten Teilen, so wie es der ursprüngliche Autor schon in seinen Kommentaren markiert hat: Der erste Teil rechnet — er füllt ein Array mit allen Zahlen des Dreiecks. Der zweite Teil zeichnet — er baut aus diesen Zahlen die sichtbaren Kästchen. Davor liegt noch eine kleine Funktion, die die Eingabefelder ausliest und prüft. Ein Array ist dabei nichts anderes als eine durchnummerierte Liste von Werten.

const zahlen = [0, 1, 1, 1];
let spaltennummer = 4;

Alle Zahlen des Dreiecks landen hintereinander in einer Liste, nicht in einer Liste pro Reihe. Position 0 bleibt ungenutzt (deshalb die 0), Position 1 ist die Spitze des Dreiecks, die Positionen 2 und 3 sind die zweite Reihe. Ab Position 4 beginnt also die dritte Reihe — genau dort setzt der Zähler spaltennummer an.

if (zelle === 1 || zelle === reihe) {
  zahlen[spaltennummer] = 1;
} else {
  zahlen[spaltennummer] =
    zahlen[spaltennummer - reihe] + zahlen[spaltennummer - reihe + 1];
}

Hier steckt die ganze Mathematik. Die erste und die letzte Zelle einer Reihe sind immer 1 — das ist die Außenkante des Dreiecks. Alle anderen Zellen sind die Summe der beiden darüberliegenden Zahlen. Weil alles in einer einzigen Liste liegt, findet man diese beiden Nachbarn, indem man von der aktuellen Position genau reihe Plätze zurückgeht: Das ist die Zahl links oben, und der Platz direkt daneben ist die Zahl rechts oben. Die beiden ineinander geschachtelten for-Schleifen laufen dabei zeilenweise durch das Dreieck: die äußere über die Reihen, die innere über die Zellen einer Reihe.

const feld = document.createElement("span");
feld.className = "pd-zelle";
feld.textContent = zellinhalt;
if (zellinhalt % bedingung === 0) {
  feld.style.backgroundColor = bgcolor;
}

Für jede Zahl entsteht ein eigenes <span>-Element, das per textContent die Zahl bekommt. Der Prozent-Operator % ist kein Prozentrechnen, sondern liefert den Rest einer Division: 10 % 5 ergibt 0, weil 10 glatt durch 5 teilbar ist, 11 % 5 dagegen 1. Ist der Rest also 0, ist die Zahl durch den eingegebenen Teiler teilbar und bekommt über style.backgroundColor die gewählte Hintergrundfarbe.

ausgabe.textContent = "";

Diese eine Zeile vor dem Zeichnen ist wichtig: Sie leert die Ausgabefläche. Ohne sie würde bei jedem Klick ein weiteres Dreieck unter das alte gehängt. Das Original löste das anders — es schrieb die ganze Seite mit document.write komplett neu. Das geht in modernen Browsern nicht mehr sinnvoll, weil document.write nach dem Laden der Seite deren gesamten Inhalt überschreibt. Stattdessen füllt das Script hier gezielt einen Container.

if (!Number.isFinite(reihenzahl) || reihenzahl < 1 || reihenzahl > 60) {
  meldung.textContent = "Bitte tragt bei den Reihen eine ganze Zahl von 1 bis 60 ein.";
  return;
}

Number.isFinite() prüft, ob wirklich eine gültige, endliche Zahl im Feld steht — ein leeres Feld oder Buchstaben fallen damit durch. Statt einer Fehlermeldung im Rechenteil erscheint dann ein freundlicher Hinweis in der Ergebnisfläche, und return bricht die Funktion ab.

Zum Anpassen: Die Obergrenze von 60 Reihen ist reine Vorsicht — sie steht an genau zwei Stellen (im max-Attribut des Eingabefelds und in der Prüfung) und darf höher gesetzt werden, wenn ihr bereit seid, kurz zu warten. Ab etwa 50 Reihen werden die Zahlen allerdings größer als das, was JavaScript exakt speichern kann, und erscheinen gerundet. Aussehen und Größe der Kästchen ändert ihr über die Regeln zu .pd-zelle im <style>-Block, etwa min-width für schmalere Felder oder font-size für kleinere Zahlen.