JavaScript: Schachbrett Schleifen?
Leute, bitte, ich brauche Hilfe, wer programmieren kann.
Ich habe es versucht, aber keine Ahnung warum, es funktioniert nicht.
Ich wäre sehr dankbar, wenn ich Tipps oder so hier bekommen würde.
Was fehlt? Was ist falsch?
JavaScript:
"use strict";
window.addEventListener("load", init);
let i;
let t;
let tr;
let td;
function init() {
console.log("Fenster ist geladen");
let btn = document.getElementById("btn");
btn.addEventListener("click", btn_angeklickt);
}
function btn_angeklickt() {
console.log("btn angecklickt");
let zeilen = document.getElementById("zeilen").value;
console.log(zeilen);
let spalten = document.getElementById("spalten").value;
console.log(spalten);
let table = document.getElementById("bratan");
for (i = 0; i < spalten.value; i++);
{
tr = document.createElement("tr");
table.appendChild(tr);
for (t = 0; t < zeilen.value; t++);
{
td = document.createElement("td");
if (i % 2 == t % 2) {
td.style.backgroundColor = colors[0];
td.style.height = "60px";
td.style.width = "60px";
}
else {
td.style.backgroundColor = colors[1];
td.style.height = "60px";
td.style.width = "60px";
}
}
}
tr.appendChild(td);
}
let colors = ["#044272", "#80AB52"];
HTML:
<label for="Anzahl">Zeilen</label>
<input type="number" id="zeilen">
<br><br>
<label for="Anzahl">Spalten</label>
<input type="number" id="spalten">
</form>
<br>
<button type="button" id="btn" value="btn">erstelle Schachbrett</button>
<table id="bratan"></table>
2 Antworten
Es gibt verschiedene Fehler in deinem Dokument.
1) Deinem Dokument fehlt der Doctype und ein Seitentitel (html- und body-Element hingegen sind nicht explizit notwendig).
2) Der Starttag für das Formular fehlt. Im Übrigen würde ich den Button mit in das Formular verschieben. Er schickt es auch nicht ab, da es sich um keinen submit-Button handelt.
3) Deine label-Element verweisen auf Elemente, die nicht existieren. Ändere den Wert des for-Attributs jeweils auf zeilen und spalten.
4) Deine Schleifen bergen jeweils zwei Fehler:
for(i=0; i < spalten.value; i++); {
Zum einen zählen sie gegen den Wert undefined. In den Variablen spalten und zeilen steht jeweils schon der numerische Wert aus den Eingabefeldern. Du darfst also nicht erneut value aufrufen.
Zum anderen führen deine Schleifen nur eine leere Anweisung aus (beachte das Semikolon). Der Block, der danach beginnt, ist nicht mehr der Schleifenrumpf.
Entferne also auch das Semikolon hinter jedem Schleifenkopf.
5) Ich würde dir abschließend noch raten, immer aussagekräftige Bezeichner zu verwenden (t ist das bspw. gar nicht), nur bei einer Sprache zu bleiben (Beispiel: entweder tabelle oder überall englische Bezeichner) und Variablen wirklich nur in dem Block zu deklarieren, in dem sie tatsächlich gebraucht werden. Das heißt, i und t wandern jeweils in die Schleifenköpfe:
for (let i = 0; i < spalten; i++) {
So hältst du dein Skript übersichtlich.
Werte, die sich voraussichtlich nie zur Ausführungszeit ändern (z.B. spalten, table, etc.) können zudem ruhig als konstant deklariert werden.
Beispiel:
const zeilen = document.getElementById("zeilen").value;
Im HTML-Bereich fehlen <html> </html> <body> </body> und der Script ist nicht eingebunden
Oja das habe ich halt nicht veröffentlicht haha aber danke
"use strict";
window.addEventListener("load", init);
let i;
let t;
let tr;
let td;
function init() {
console.log("Fenster ist geladen");
let btn = document.getElementById("btn");
btn.addEventListener("click", btn_angeklickt);
}
function btn_angeklickt() {
console.log("btn angecklickt");
let zeilen = document.getElementById("zeilen").value;
console.log(zeilen);
let spalten = document.getElementById("spalten").value;
console.log(spalten);
let table = document.getElementById("bratan");
for (i = 0; i < spalten; i++) {
tr = document.createElement("tr");
table.appendChild(tr);
for (t = 0; t < zeilen; t++) {
td = document.createElement("td");
if (i % 2 == t % 2) {
td.style.backgroundColor = colors[0];
td.style.height = "60px";
td.style.width = "60px";
} else {
td.style.backgroundColor = colors[1];
td.style.height = "60px";
td.style.width = "60px";
}
tr.appendChild(td);
}
}
}
let colors = ["#044272", "#80AB52"];
Falls du Fragen zu den Änderungen hast kann ich dir die gerne erklären
hey, danke für dein Versuch, aber ich glaube das Problem liegt an die Schleifen.. laut aufgabe sollen durch diese verschatelte schleifen und das eine Verzweigung ein Schachbrett mit 2 Farben gemacht werden
Ja Mein Code funktioniert doch, habs doch eben noch getestet.
also durch dein Code kann ein Schachbrett erstellt werden? wieso geht es bei mir nicht, ich versuche es nochmal jetzt aber glaube nicht
Kopier einfach alles rein, im Code waren nämlich mehrere Dinge fehlerhaft
Omg jetzt plötzlich funktioniert es, ich habe aber dafür neue Dateien erstellt. Ja eigentlich weiß ich nicht was du gemacht hast :o ich kann die aber Googlen, außer du würdest es gerne. weil ich will dir nicht noch mehr Zeit verschwenden. Übrigens Vielen lieben Dank. Die Abgabe war bis morgen und in dieser Corona Zeit ist es ja sehr schwierig alles alleine hinzubekommen.
Oben hat jemand aufgelistet was daran falsch war, und kein problem :)
Hast du dein Code bearbeitet LOL, welche Fehler hast du bitte gefunden ???
Ich wünsche dir einen schönen Abend, eine gute Nacht und eine angenehme Woche. Lg
Hier fehlt noch das sich "tr.appendChild(td);" nicht innerhalb der verschachtelten Schleife befindet