JavaScript修改DOM元素textContent属性未生效问题排查求助

问题根因 #

1. doCalc 函数的非法输入分支没有返回值，执行完inputText.textContent = "INVALID CALCULATION"之后，函数会继续执行后续逻辑。你大概率在调用doCalc的位置之后，还有同步的渲染逻辑，会把当前存储的输入内容重新赋值给inputText.textContent，直接覆盖了你刚设置的错误提示。
2. 样式修改能生效是因为后续的渲染逻辑只修改文本属性，不会重置样式，所以才会出现样式生效但文本不更新的现象。

修复方案 #

在非法输入分支的文本赋值语句后加return，终止函数执行，避免后续逻辑覆盖文本：

else {
    //THIS IS THE LINE GIVING TROUBLE
    inputText.textContent = "INVALID CALCULATION";
    // 新增return终止后续逻辑执行
    return;
}

如果加了return之后还是有问题，可以排查有没有全局的DOM更新定时器、输入事件防抖逻辑，这类异步逻辑也可能在你设置错误提示后，用旧的输入内容再次更新文本。

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