JavaScript点击最后一个盒子时无法递增前一个兄弟元素的问题

我来帮你搞定这个问题！你遇到的核心问题是：当点击最后一个盒子时，element.nextElementSibling会返回null，这时候直接尝试读取它的innerHTML会抛出错误，导致后续处理左侧相邻元素的代码根本没机会执行。

修复后的原生JavaScript代码 #

function boxInc(element) {
    // 处理当前盒子数值+2
    let number = parseInt(element.innerHTML);
    number += 2;
    element.innerHTML = number;

    // 处理右侧相邻盒子：先判断元素是否存在再操作
    if (element.nextElementSibling) {
        let rightNumber = parseInt(element.nextElementSibling.innerHTML);
        rightNumber++;
        element.nextElementSibling.innerHTML = rightNumber;
    }

    // 处理左侧相邻盒子：先判断元素是否存在再操作
    if (element.previousElementSibling) {
        let leftNumber = parseInt(element.previousElementSibling.innerHTML);
        leftNumber++;
        element.previousElementSibling.innerHTML = leftNumber;
    }
}

完整可运行代码示例 #

HTML

<div id="container">
    <div onclick="boxInc(this)">0</div>
    <div onclick="boxInc(this)">0</div>
    <div onclick="boxInc(this)">0</div>
    <div onclick="boxInc(this)">0</div>
    <div onclick="boxInc(this)">0</div>
    <div onclick="boxInc(this)">0</div>
</div>

CSS

#container div {
    width: 5vw;
    height: 5vw;
    background: rgb(10,200,40);
    float: left;
    margin: 1vw;
    padding: 1vw;
    font-family: sans-serif;
    font-size: 20pt;
}

关键改进说明 #

• 增加元素存在性检查：在处理左右相邻元素前，先通过if (element.nextElementSibling)和if (element.previousElementSibling)判断目标元素是否存在，避免因null对象读取属性而抛出错误，确保所有逻辑分支都能正常执行。
• 规范变量声明：用let替换无声明的变量，避免变量自动成为全局变量引发潜在问题，提升代码的可维护性。

修改后所有场景都能正常工作：

• 点击第一个盒子：当前数值+2，右侧相邻盒子+1（左侧无元素，跳过）
• 点击最后一个盒子：当前数值+2，左侧相邻盒子+1（右侧无元素，跳过）
• 点击中间盒子：当前数值+2，左右两侧相邻盒子各+1

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