求助：点击数字按钮Toggle时数组元素异常丢失问题

需求说明 #

• HTML布局：展示1-16的数字按钮，以表格样式排列，每个数字对应一个单元格按钮
• 交互逻辑：点击按钮可切换选中状态，将对应数字添加到selectedNumbers数组，或从数组中移除

问题现象 #

执行移除操作（点击已选中的按钮）时出现异常：

• 移除单个数字时，数组中部分元素莫名丢失
• 偶尔点击一次移除操作，整个数组的元素会被全部清空

相关代码 #

HTML代码 #

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

JavaScript代码 #

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

问题排查 #

1. splice方法参数错误：addRemoveToArray函数里，arr.splice(idx, val)的第二个参数应该是要删除的元素数量，而不是要删除的值。当val是10、16这类较大数字时，会从索引idx开始删除val个元素，直接导致数组大量元素丢失甚至清空。
2. 无效的条件判断：cellValue函数里的if(event.target.cell === cell.cellNumbers)完全无效，event.target.cell和cell.cellNumbers都是未定义的变量，这行判断永远不成立，原代码能执行纯粹是因为逻辑写错了。
3. HTML重复id：所有按钮的id都是btn，虽然不影响功能，但违反HTML规范，建议移除或设置唯一id。

修复方案 #

1. 修正splice的第二个参数为1，确保每次只删除一个元素
2. 删除cellValue中无效的判断逻辑，直接执行状态切换和数组操作
3. （可选）修正HTML中的重复id问题

修复后的完整代码 #

HTML代码（修正重复id） #

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

JavaScript代码 #

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

const selectedNumbers = [];

clickCell()

function clickCell (){
    cellNumbers.forEach(item => { 
        item.addEventListener("click", cellValue)
    });
}

function cellValue(event){
    const cell = event.target.value;
    // 切换选中样式
    event.target.classList.toggle('x');
    // 处理数组添加/移除
    addRemoveToArray(selectedNumbers, cell);
    console.log(selectedNumbers)
}

function addRemoveToArray (arr, val){
    const idx = arr.indexOf(val);
    idx === -1 ? arr.push(val) : arr.splice(idx, 1); // 第二个参数改为1，仅删除当前元素
}

内容的提问来源于stack exchange，提问作者cks_29