Beiträge: 130
Themen: 0
Registriert seit: Jul 2023
Bewertung:
10
Guten Abend,
viele Aktivitäten in den letzten Tagen, daher kann ich erst jetzt antworten.
Was die Berechnungen betrifft, ist mir jetzt alles klar, denke ich.
Unklar ist mir jedoch die Sache mit den Farben: Ich hatte es zunächst so verstanden, dass alle Felder, in die noch nichts von Hand eingetragen wurde, blau bleiben sollen, aber möglicher Weise lag ich damit daneben?
Beste Grüße, Ulrich
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
Beiträge: 130
Themen: 0
Registriert seit: Jul 2023
Bewertung:
10
Dieses Javascript müsste jetzt von der Berechnung der Summen her passen:
Code:
<script>
// Abschicken des Formulars durch Drücken von Enter unterdrücken:
window.addEventListener('change', event => {
if (event.target.matches('table input'))
event.preventDefault();
});
// Eventlistener für Eingabe irgend wo auf der Seite registrieren:
window.addEventListener('input', event => {
const
// Die Tabellenzeile, in der sich das Element befindet, ermitteln:
row = event.target.closest('tr');
// Wurde eine Tabellenzeile gefunden?
if (row) {
const
// Das Feld für die Summe in dieser Zeile bereit stellen:
sumField = row.querySelector('.sum'),
// Die Eingabefelder in dieser Zeile bereit stellen:
inputsInRow = row.querySelectorAll('input');
// Schriftfarbe abhängig vom Wert einstellen:
function setColor(input, val) {
if (val < 0) {
input.style.color = "#00CC99";
} else if (val == 0) {
input.style.color = "#000000";
} else if (val > 0) {
input.style.color = "#FF3300";
}
}
// Summe über die zuletzt bereit gestellten Eingabefelder
// ermitteln:
let
sum = 0;
inputsInRow.forEach(input => {
const
// Zunächst den eingegebenen Wert
// als Integer bereit stellen:
val = parseInt(input.value);
// Wenn es sich nicht um ein Summenfeld selber handelt:
// Wert auf die Summe aufaddieren:
if (!input.classList.contains('sum') &&
!input.classList.contains('total-sum')) {
sum += parseInt(input.value);
}
setColor(input, val);
});
// Summe in das Ausgabefeld eintragen:
sumField.value = sum;
setColor(sumField, sum);
// Summen beider Corts in Gesamtsumme übertragen:
const
// Spielername aus data-Attribut der aktuellen Zeile ermitteln:
player = row.dataset.player,
// Alle Tabellenzeilen für diesen Spieler bereit stellen:
playersCorts = document.querySelectorAll(`tr[data-player="${player}"]`);
// Gesamtsumme für alle Corts ermitteln:
let
totalSum = 0;
playersCorts.forEach(cort => {
console.log(cort);
// Wir berücksichtigen die Summe nur, wenn schon ein Wert vorhanden ist:
const
val = cort.querySelector('.sum').value;
if (val != '') {
totalSum += parseInt(val);
}
});
console.log(totalSum);
// Gesamtsumme in Feld eintragen:
const
fieldTotalSum = document.querySelector(`tr[data-player="${player}"] input.total-sum`);
fieldTotalSum.value = totalSum;
}
});
</script>
Im HTML habe ich einige Klassen und je ein data-Attribut mit dem Spielernamen in jeder Zeile hinzu gefügt, hier nur die Zeilen für Gabi:
Code:
<tr data-player="gabi" class="gabi cort-one">
<td>Gabi <br></td>
<td><input type="text" autofocus name="g1" type="text" style="width: 40px" tabindex="1" id="g1"
value="-1" />
</td>
<td><input type="text" name="g2" type="text" style="width: 40px" tabindex="4" id="g2" value="-1" />
</td>
<td><input type="text" name="g3" type="text" style="width: 40px" tabindex="7" id="g3" value="-1" />
</td>
<td><input type="text" name="g4" type="text" style="width: 40px" tabindex="10" id="g4" value="-1" />
</td>
<td><input type="text" name="g5" type="text" style="width: 40px" tabindex="13" id="g5" value="-1" />
</td>
<td><input type="text" name="g6" type="text" style="width: 40px" tabindex="16" id="g6" value="-1" />
</td>
<td><input type="text" name="g7" type="text" style="width: 40px" tabindex="19" id="g7" value="-1" />
</td>
<td><input type="text" name="g8" type="text" style="width: 40px" tabindex="22" id="g8" value="-1" />
</td>
<td><input type="text" name="g9" type="text" style="width: 40px" tabindex="25" id="g9" value="-1" />
</td>
<!-- Dem Ausgabefeld geben wir die Klass "sum" um es identifizieren zu können: -->
<td><input class="sum" disabled name="gz1" type="text" style="width: 40px" id="gz1" /></td>
<td></td>
</tr>
<tr data-player="gabi" class="gabi cort-two">
<td>Gabi <br></td>
<td><input name="g10" type="text" style="width: 40px" tabindex="28" id="g10" value="-1" /></td>
<td><input name="g11" type="text" style="width: 40px" tabindex="31" id="g11" value="-1" /></td>
<td><input name="g12" type="text" style="width: 40px" tabindex="34" id="g12" value="-1" /></td>
<td><input name="g13" type="text" style="width: 40px" tabindex="37" id="g13" value="-1" /></td>
<td><input name="g14" type="text" style="width: 40px" tabindex="40" id="g14" value="-1" /></td>
<td><input name="g15" type="text" style="width: 40px" tabindex="43" id="g15" value="-1" /></td>
<td><input name="g16" type="text" style="width: 40px" tabindex="46" id="g16" value="-1" /></td>
<td><input name="g17" type="text" style="width: 40px" tabindex="49" id="g17" value="-1" /></td>
<td><input name="g18" type="text" style="width: 40px" tabindex="52" id="g18" value="-1" /></td>
<td><input class="sum" disabled name="gz2" type="text" style="width: 40px" id="gz2" /></td>
<td><input class="total-sum" disabled name="gg" type="text" style="width: 40px" id="gg" /></td>
</tr>
Wenn es noch nicht funktioniert oder nicht deinen Anforderungen entspricht müssen wir weiter sehen.
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
Beiträge: 13
Themen: 2
Registriert seit: Jan 2023
Bewertung:
0
Hallo Ulrich,
vielen Dank für deine Hilfe und auch deine Zeit.
Das Formular wird über die Spielzeit ausgefüllt (ca. 1,5 - 2 Std).
die unterschiedlichen Farben helfen bei erkennen des Status, wenn alles wieder Grün ist, ist das nicht mehr der Fall.
an welcher Steller wird die Farbe grün gesetzt?
In der Funktion setColor sind nur 3 Farben gesetzt.
Gruß Jörg
Beiträge: 130
Themen: 0
Registriert seit: Jul 2023
Bewertung:
10
An dieser Stelle wir die Farbe auf grün gesetzt:
Code:
// Schriftfarbe abhängig vom Wert einstellen:
function setColor(input, val) {
if (val < 0) {
input.style.color = "#00CC99"; //<-- das dürfte grün sein
} else if (val == 0) {
input.style.color = "#000000";
} else if (val > 0) {
input.style.color = "#FF3300";
}
}
d. h. wenn der Wert kleiner als 0 ist.
Wenn wir das setColor hinter die Schleife verschieben, wird nur das aktuelle Eingabefeld gesetzt, nicht alle:
Code:
inputsInRow.forEach(input => {
const
// Zunächst den eingegebenen Wert
// als Integer bereit stellen:
val = parseInt(input.value);
// Wenn es sich nicht um ein Summenfeld selber handelt:
// Wert auf die Summe aufaddieren:
if (!input.classList.contains('sum') &&
!input.classList.contains('total-sum')) {
sum += parseInt(input.value);
}
});
setColor(input, val);
// Summe in das Ausgabefeld eintragen:
sumField.value = sum;
setColor(sumField, sum);
Das müsste dann das sein, was Du wünschst.
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
Beiträge: 13
Themen: 2
Registriert seit: Jan 2023
Bewertung:
0
ja super vielen dank
ich bin nicht auf die Idee gekommen das es an den eingestellten Farben liegen kann.
Im CSS-Hesder war die richtige Farbe und wurde dann durch JS überschrieben.
noch mal Danke
Gruß
