为何DOM元素innerHTML不更新？如何实现BMI状态动态变化？

核心问题 #

1. 重复创建DOM元素：每次点击提交都会生成新的<p id="bmistatus">并追加到页面，旧元素未被替换，视觉上看起来内容没更新，实际新内容在旧内容下方。
2. 逻辑语法错误：超重判断条件写成了bmiResult =>25，这里的=>是箭头函数语法，而非大于等于运算符>=，导致该分支永远不会触发，BMI≥25时会错误显示为"Healthy"。
3. 表单提交潜在风险：虽表单设置了onsubmit="event.preventDefault()"，但按钮点击事件未显式阻止默认提交行为，存在不必要的页面刷新风险。

修复步骤 #

1. 修正条件判断语法错误

将超重判断的=>改为>=：

else if(bmiResult >=25){
    bmiStatus.innerHTML=`Overweight`;
}

2. 避免重复创建状态元素（二选一即可）

方法一：复用已存在的状态元素

在bmiCalc函数中先尝试获取页面上的bmistatus元素，存在则直接更新内容，不存在再创建添加：

export default function bmiCalc(event){
    // 阻止表单默认提交行为
    event.preventDefault();

    let heightSquare = Math.pow(Number(heightEl.value), 2);
    let bmiResult = Math.floor(Number(weightEl.value)*703/heightSquare);
    
    // 尝试获取已有的状态元素
    let bmiStatus = document.getElementById("bmistatus");
    // 不存在则创建并添加到页面
    if(!bmiStatus){
        bmiStatus = document.createElement("p");
        bmiStatus.setAttribute("id","bmistatus");
        const bmiBody = document.getElementById("bmi");
        bmiBody.appendChild(bmiStatus);
    }

    bmidisplayEl.innerHTML =`Your bmi is ${bmiResult}`;

    if (bmiResult <= 18.5){
        bmiStatus.innerHTML=`Underweight`;
    }else if(bmiResult >=25){
        bmiStatus.innerHTML=`Overweight`;
    }
    else{
        bmiStatus.innerHTML=`Healthy`;
    }
}

方法二：提前在HTML中定义状态元素

直接在HTML的bmi-value元素下方添加状态元素，后续JS只需获取并更新内容：

<div id="bmi">
    <!-- 其他原有内容 -->
    <p id="bmi-value"></p>  
    <p id="bmistatus"></p> <!-- 添加该行 -->
</div>

对应简化后的JS代码：

export default function bmiCalc(event){
    event.preventDefault();

    let heightSquare = Math.pow(Number(heightEl.value), 2);
    let bmiResult = Math.floor(Number(weightEl.value)*703/heightSquare);
    
    // 直接获取已存在的元素
    let bmiStatus = document.getElementById("bmistatus");

    bmidisplayEl.innerHTML =`Your bmi is ${bmiResult}`;

    if (bmiResult <= 18.5){
        bmiStatus.innerHTML=`Underweight`;
    }else if(bmiResult >=25){
        bmiStatus.innerHTML=`Overweight`;
    }
    else{
        bmiStatus.innerHTML=`Healthy`;
    }
}

3. 完善表单提交处理

在bmiCalc函数开头添加event.preventDefault()，确保点击按钮时不会触发表单默认提交行为，避免页面刷新。

最终效果 #

修改后，每次提交表单时，BMI数值和状态都会实时更新，不会重复创建元素，条件判断逻辑也能正确触发对应状态文本。

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