Why this array is bugging? I used simple event target toggle to add and remove element-CodePudding

This html should look like in table each number is in cell

Each number is clickable to add it in array and can be toggle to remove in array

The problem here is it bugg when number is toggle to remove in array, the array element becomes incorrect

Some element went missing in the ARRAY when toggle only one number to remove

 Sometime all elements are missing in the ARRAY when only 1 element toggled to remove

<div  id="board">
                <button  id="btn" value="1" data-cell>1</button>
                <button  id="btn" value="2" data-cell>2</button>
                <button  id="btn" value="3" data-cell>3</button>
                <button  id="btn" value="4" data-cell>4</button>
                <button  id="btn" value="5" data-cell>5</button>
                <button  id="btn" value="6" data-cell>6</button>
                <button  id="btn" value="7" data-cell>7</button>
                <button  id="btn" value="8" data-cell>8</button>
                <button  id="btn" value="9" data-cell>9</button>
                <button  id="btn" value="10" data-cell>10</button>
                <button  id="btn" value="11" data-cell>11</button>
                <button  id="btn" value="12" data-cell>12</button>
                <button  id="btn" value="13" data-cell>13</button>
                <button  id="btn" value="14" data-cell>14</button>
                <button  id="btn" value="15" data-cell>15</button>
                <button  id="btn" value="16" data-cell>16</button>
                
                

            </div>
        </div>

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | | 10 | 11 | 12 | 13 | 14 | 15 | 16|

const cellNumbers = document.querySelectorAll('[data-cell]');
const board = document.getElementById('board')


const selectedNumbers = [];

clickCell()
//Make the all cell clickable/toggle
function clickCell (){
    cellNumbers.forEach(item => { 
        item.addEventListener("click", cellValue)
    });
}

//Get the value in each cell
function cellValue(event){
    const cell = event.target.value;
    cell.cellNumbers;
    
    if(event.target.cell === cell.cellNumbers){
        event.target.classList.toggle('x');

        addRemoveToArray(selectedNumbers, cell);
        
    }
    console.log(selectedNumbers)
}

function addRemoveToArray (arr, val){
    const idx = arr.indexOf(val);
    //console.log(idx)

    idx === -1 ? arr.push(val) : arr.splice(idx, val);
}

CodePudding user response：

I wasn't 100% sure what your script was intended to do, but I came up with this which might help get you on the right track:

const cellDivs = document.querySelectorAll('[data-cell]');
const selectedNumbers = [];

cellDivs.forEach(cellDiv => cellDiv.addEventListener("click", updateState));

function updateState(event){
  event.target.classList.toggle('selected');
  toggleInArray(selectedNumbers, event.target.dataset.cell);
}

function toggleInArray(array, value){
  if(array.indexOf(value) === -1){
    array.push(value);
  }else{
    array.splice(array.indexOf(value), 1); // Splices 1 element out
  }
  console.log(array);
}

#board{ display: flex; }
[data-cell]{ padding: 0.4em 0.6em; border: 1px solid grey; }
.selected{ background: lightskyblue; }

<div id="board">
  <div data-cell="1"> 1 </div>
  <div data-cell="2"> 2 </div>
  <div data-cell="3"> 3 </div>
  <div data-cell="4"> 4 </div>
  <div data-cell="5"> 5 </div>
  <div data-cell="6"> 6 </div>
</div>