Bei fehlender Variable WIEDER Abbruch ?

[Felix Riesterer]

Lieber Franz,

ich vermute, dass das genau davon kommt, dass Du mit den Bezeichnern programmatisch hantierst. Würdest Du Dich rein an der Dokumentstruktur orientieren, wäre das Ganze dynamisch und sicherer.

Da Du von Zeilen und Spalten sprichst, denkst Du im Grunde in einer Tabelle, bei der jede Zeile die exakt gleiche Anzahl an Feldern ("Spalten") hat. Und selbst wenn dem nicht so wäre, könntest Du das bei einer dynamischen Herangehensweise kompensieren!

Ich vereinfache Dein jsFiddle-Beispiel vom Markup her:

<ol id="daten">
  <li>
    <label>Zeile 1 Wert 1 <input type="number"></label>
    <label>Zeile 1 Wert 2 <input type="number"></label>
    <label>Zeile 1 Wert 3 <input type="number"></label>
  </li>
  <li>
    <label>Zeile 2 Wert 1 <input type="number"></label>
    <label>Zeile 2 Wert 2 <input type="number"></label>
  </li>
</ol>

Ich muss die <label> im HTML haben, kann ihre Darstellung nötigenfalls mit CSS aber ausblenden. Egal. Die fehlende dritte Zahl in der zweiten Zeile ist Absicht, um diesen "Fehler" in JavaScript kompensieren zu müssen, damit das Script sauber arbeitet. Außerdem habe ich die Zeilen als Listenpunkte realisiert, damit man eine zumindest auf Zeilenebene semantische Struktur hat (deine div-Suppe will mir so gar nicht schmecken).

So. Nun zu den Zeilen und Spalten.

function holeWerte () {
  const liste = document.getElementById("daten");
  const zeilen = liste.getElementsByTagName("li");
  const tabelle = []; // das wird unsere Datentabelle
  var felder; // benötigen wir später

  for (var z=0; z < zeilen.length; z++) {

    // Tabellenzeile anlegen
    tabelle[z] = []; // noch leer

    felder = zeilen[z].querySelector('input[type="number"]');

    for (f = 0; f < felder.length; f++) {
      // Wert des Feldes in unserer Tabellenzeile eintragen
      tabelle[z][f] = parseFloat(
        felder[f].value.replace(/[^0-9 ]/g, "")
      ) || 0;
    }
  }

  return tabelle;
}

Die Variable tabelle wird ein Array, dessen Inhalte selbst wieder Arrays sind. Damit hast Du eine zweidimensionale Abbildung der Werte Deiner Eingabefelder. Man kann also mit tabelle[y][x] (y = Zeile, x = Spalte) auf eine bestimmte "Zelle" zugreifen. Damit sollte eine Berechnung von Spalten und Zeilen kein Problem mehr sein:

function summe_spalte (x) {
  const zeilen = holeWerte();
  var summe = 0;

  for (var y=0; y < zeilen.length; y++) {
    // Zelle vorhanden?
    if (zeilen[y][x]) {
      summe += zeilen[y][x];
    }
  }

  return summe;
}

function summe_zeile (y) {
  const zeilen = holeWerte();
  var summe = 0;

  // Zeile vorhanden?
  if (zeilen[y]) {

    for (x = 0; x < zeilen[y].length; x++) {
      summe += zeilen[y][x];
    }
  }

  return summe;
}

Der gesamte Code hier ist ungetestet, sollte aber veranschaulichen, wie man das dynamisch lösen könnte. Außerdem kann man sehen, dass fehlende Zellen ignoriert werden, was so ähnlich ist, als stünde darin der Wert "0".

Liebe Grüße

Felix Riesterer