调用adding_commas加千位逗号，console正常但innerHTML赋值不生效如何解决

问题排查与解决方法 #

你遇到的控制台输出正常、页面显示无逗号的问题，按优先级排查以下原因：

• 赋值操作后存在其他脚本修改了#totalbudgets元素的内容：如果后续有逻辑将该元素的文本取出转为数字做计算、或者重新赋值为原始数值，逗号会被自动清除，确保格式化赋值是该元素的最后一次内容修改操作。
• 元素存在特殊CSS规则：检查该元素是否设置了font-variant-numeric: tabular-nums这类可能影响字符显示的样式，或者存在文本替换的伪元素规则。
• 你当前的adding_commas函数正则逻辑是按2位分割前缀，仅适配印度计数体系，如果你需要通用的每3位千位分隔效果，可以替换为更稳定的实现，避免边界场景下的格式异常。

通用千位分隔函数实现

你可以直接替换原有adding_commas函数，支持整数、小数场景，兼容性更好：

function adding_commas(x) {
    // 处理非数字边界场景
    if (x == null || isNaN(Number(x))) return String(x);
    // 拆分整数、小数部分分别处理
    const parts = x.toString().split('.');
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    return parts.join('.');
}

验证方法

在赋值前打印格式化结果，确认返回值符合预期：

const formattedVal = adding_commas(totalbudget);
// 确认此处打印的字符串包含千位逗号
console.log('格式化结果：', formattedVal, typeof formattedVal);
document.getElementById('totalbudgets').innerHTML = formattedVal;

如果以上操作后仍然显示异常，可以给#totalbudgets元素设置临时的样式border: 1px solid red;，确认你赋值的元素和页面显示的元素是同一个，避免id拼写错误导致赋值到不存在的元素。

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