How to only allow a certain number of click events per column? And also per page? With only Vanilla-CodePudding

Making a connect 4 using vanilla JavaScript. Using an event listener "click" to insert a colored disk into a column. The disks keep stacking infinitely. I need it to stop after 6. And then 42 total. I have it divided into 7 columns. Each having their own event handler for the "click". How do I get it to insert each click into an array? https://youtu.be/Jqm5m75pq6A Here is an example of what I have

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;
    }
});

CodePudding user response：

You could just count how many child elements are in the column.

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

You can do similar for all spans on the entire board if you have reference to an outer container to do the querySelectorAll() from.

The other option would be to store your data in your gameBoard array and check the values. This way would probably be faster, but a little more complicated.

CodePudding user response：

Just start with empty arrays, so you don't have to iterate them on each click and count how many items already in the array of clicked column:

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: 2.3em;
  height: calc(2.2em * 7   0.1em);
  outline: 1px solid black;
  background-color: white;
  display: flex;
  flex-direction: column-reverse;
}

.blackDisc,
.redDisc
{
  width: 2em;
  height: 2em;
  border-radius: 100%;
  display: inline-block;
  vertical-align: top;
  margin: 0.1em;
}

.blackDisc
{
  background-color: black;
}

.redDisc
{
  background-color: red;
}

<div >
  <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>