JS中textContent链式赋值触发TypeError无法修改元素内容问题求解

核心原因：JavaScript 链式赋值的运算规则是从右到左执行，且赋值表达式的返回值为等号右侧的值 #

错误代码的执行过程拆解 #

你写的链式赋值代码：

let player1Score_El = document.getElementById("score--0").textContent = 0;

实际会按照以下顺序执行：

1. 先执行最右侧的赋值操作：document.getElementById("score--0").textContent = 0
   • 这一步本身是生效的：id为score--0的DOM元素文本会被修改为0
   • 但该赋值表达式的返回值是等号右侧的0（数字类型）
2. 再把上一步返回的数字0赋值给变量player1Score_El
   此时你的变量存的不是DOM元素，而是纯数字0，后续执行player1Score_El.textContent = score时，本质是尝试给数字类型的值设置textContent属性，自然会抛出类型错误。

拆分写法生效的原因 #

拆分后的代码：

// 第一步：变量存储DOM元素对象
let player1Score_El = document.getElementById("score--0");
// 第二步：仅修改元素的textContent属性，不改变变量存储的值
player1Score_El.textContent = 0;

这种写法下变量player1Score_El全程存储的都是DOM元素对象，后续操作元素属性自然可以正常执行。

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