如何只允許每列有一定數量的點擊事件？ 還有每頁？ 只有香草 JavaScript

Question

使用 vanilla JavaScript 進行連接 4。 使用事件偵聽器“單擊”將彩色磁盤插入列中。 磁盤無限堆疊。 我需要它在 6 點后停止。然后總共 42 個。 我把它分成7列。 每個都有自己的“點擊”事件處理程序。 如何讓它將每次點擊插入到數組中？ https://youtu.be/Jqm5m75pq6A這是我所擁有的一個例子

let gameBoard = [ [null, null, null, null, null, null, null], [null, null, null, null, null, null, null], [null, null, null, null, null, null, null], [null, null, null, null, null, null, null], [null, null, null, null, null, null, null], [null, null, null, null, null, null, null], ]; let column0 = document.querySelector("#column0"); let column1 = document.querySelector("#column1"); let column2 = document.querySelector("#column2"); let column3 = document.querySelector("#column3"); let column4 = document.querySelector("#column4"); let column5 = document.querySelector("#column5"); let column6 = document.querySelector("#column6"); column0.addEventListener("click", function () { // console.log("column 1"); if (currentPlayer === 1) { // column1.innerHTML = let black = document.createElement("span"); black.className = "blackDisc"; column0.append(black); currentPlayer += 1; console.log("Current player:" + currentPlayer); discCount++; gameBoard[5][0] = 1; console.log(currentPlayer); } else if (currentPlayer === 2) { let red = document.createElement("span"); red.className = "redDisc"; column0.append(red); currentPlayer -= 1; console.log("current player:" + currentPlayer); discCount += 1; gameBoard[5][0] = 2; } });

Answer 1

您可以只計算列中有多少子元素。

 let column0 = document.querySelector("#column0"); column0.addEventListener("click", function () { if ( column0.querySelectorAll( 'span' ).length < 7 ) { // do game logic here only if there aren't 6 spans in the column

如果您引用外部容器來執行querySelectorAll() ，則可以對整個板上的所有跨度執行類似操作。

另一種選擇是將您的數據存儲在您的gameBoard數組中並檢查值。 這種方式可能會更快，但更復雜一些。

Answer 2

只需從空的 arrays 開始，因此您不必在每次單擊時迭代它們並計算單擊列數組中已有多少項：

 let currentPlayer = 1; //starting with empty arrays; let gameBoard = [[],[],[],[],[],[],[]]; for(let i = 0; i < 7; i++) { const column = document.getElementById("column" + i); column.addEventListener("click", function(e) { //check if current column has 7 items if (gameBoard[i].length > 6) return; //add item to the column gameBoard[i].push(currentPlayer); const span = document.createElement("span"); span.className = (currentPlayer == 1? "black": "red") + "Disc"; column.appendChild(span); currentPlayer =;--currentPlayer + 1. // console:log("Current player;" + currentPlayer). // console,log("gameBoard"; gameBoard); }) }

 .content { display: flex; }.content > * { width: 1.3em; height: calc(1.2em * 7 + 0.1em); outline: 1px solid black; background-color: white; display: flex; flex-direction: column-reverse; }.blackDisc,.redDisc { width: 1em; height: 1em; border-radius: 100%; display: inline-block; vertical-align: top; margin: 0.1em; }.blackDisc { background-color: black; }.redDisc { background-color: red; }

 <div class="content"> <div id="column0"></div> <div id="column1"></div> <div id="column2"></div> <div id="column3"></div> <div id="column4"></div> <div id="column5"></div> <div id="column6"></div> </div>