JS: How to Passing arguments through a click listener function?

Aktuelle Programmier- und Auszeichnungssprachen HTML / CSS / JavaScript
1

Also ich weiß gerad net weiter. Es soll eine table erstellt werden (9x9) und wenn eine Zelle angeklickt wird, soll deren Index in der Konsole ausgegeben werden:

<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8" />
	<title>App TicTacToe</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	
</head>

<body>
	<table id="ta1"></table>
	<script>
		var array1 = [0, 0, 0, 0, 0, 0, 0, 0, 0];

		function clickl(index) {
			console.log(index);
		}

		function makeTable() {
			for (var i = 0; i < 3; i++) {
				var tr = document.createElement('tr');
				for (var j = 0; j < 3; j++) {
					var td = document.createElement('td');
					td.style.width = '50px';
					td.style.height = '25px';
					td.style.border = '1px solid black';
					td.style.padding = '0';
					td.style.textAlign = 'center';
					td.appendChild(document.createTextNode(array1[i * 3 + j]));
					tr.appendChild(td);
					td.addEventListener('click', function () { clickl(i * 3 + j); });
				}
				document.getElementById('ta1').appendChild(tr);
			}
		}

		makeTable();
	</script>
</body>

</html>

Statt des richtigen Indexes (von 0 bis 8), wird aber immer 12 ausgegeben.

2

Die Variablen i und j werden in der anonymen Funktion gecaptured, und da sie in ihren Schleifen weiterlaufen, siehst du ihre Werte beim click-Aufruf in ihrem letzten Zustand. Ein einfacher Fix ist, dem Index eine Konstante zu spendieren:

	function makeTable() {
		for (var i = 0; i < 3; i++) {
			var tr = document.createElement('tr');
			for (var j = 0; j < 3; j++) {
				const index = i * 3 + j;
				var td = document.createElement('td');
				td.style.width = '50px';
				td.style.height = '25px';
				td.style.border = '1px solid black';
				td.style.padding = '0';
				td.style.textAlign = 'center';
				td.appendChild(document.createTextNode(array1[index]));
				tr.appendChild(td);
				td.addEventListener('click', function () { clickl(index); });
			}
			document.getElementById('ta1').appendChild(tr);
		}
	}

Ich bin kein JS-Experte, aber statt var sollte man wohl lieber let und const verwenden.

3

Danke Landei, das löst es. :smiley:

Ich auch nicht, bzw., nur selten etwas damit zu tun. :sweat_smile: (Bin mehr für die andere Seite verantwortlich). Aber ich hoffe nicht, dass var jetzt i. A. veraltet ist…

4

Das Verhalten liegt wohl komplett an var

let ermöglicht es Variablen zu deklarieren, deren Gültigkeitsbereich auf den Block, den Befehl oder den Ausdruck beschränkt ist, in dem sie deklariert sind. Der Unterschied zum var Schlüsselwort ist, dass der Gültigkeitsbereich auf Blöcke und nicht auf Funktionen

https://www.google.com/url?sa=t&source=web&rct=j&url=https://developer.mozilla.org/de-DE/docs/Web/JavaScript/Reference/Statements/let&ved=2ahUKEwijsuaOsdXmAhXSnVwKHQY-AYAQFjABegQIEBAH&usg=AOvVaw0oZVOfOvC_VJuYgAAwG9Bm

5

Ich wusste nicht, dass var „funktionsweite“ Gültigkeit besitzt.

Ziel ist es, ein kleines TicTacToe-Spiel zu schreiben, wobei der Spieler gegen MiniMax (nicht schlagbar) antreten kann, oder gegen ein neuronales Netz (manchmal schlagbar), das zuvor aber mit einer gewissen Anzahl MiniMax-Iterationen (also Spielsitautionen) antrainiert wird. Ich stelle mir das so vor, wenn man das NN mit 10 Spielsituationen füttert, macht es gelegentlich noch Fehler, bei 100 Spielsituationen hingegen aber net mehr. :slight_smile:

Aber eigentlich… ist das doch etwas aufwändig, es sollte schon gestern fertig sein, und ich werd’s doch erst mal lassen.