.text 内容的不明确行为

Question

我正在练习使用 .textContent 更改 <p> 元素的内容，首先我将整个元素分配给一个 let 变量

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

当我需要使用另一个带有数字值的变量更改函数内的内容时，问题会在单击带有 addEventListener:

的按钮时出现

player1Score_El.textContent = score;

然后在控制台中我收到错误消息：

script.js:23 Uncaught TypeError: Cannot create property 'textContent' on number '0' at HTMLButtonElement.holdFunc (script.js:23)

我通过从 player1Score_El 变量声明中删除 .textContent = 0; 解决了这个问题，然后再次将内容重新分配给具有 0 值的全局范围内的变量。

好的。我会插入有问题的代码和修复后的代码。

这里是有问题的代码：

'use strict';
//setting the needed variables;
let score = 0;
let currentScore = 0;
let currentScore_0El = document.getElementById ("current--0");
let player1Score_El = document.getElementById ("score--0").textContent = 0;
let diceImg = document.querySelector (".dice");


//Setting roll dice button functionl;
const rollDiceFunc = function () {
const diceRoll = Math.trunc(Math.random() * 6) + 1;
currentScore += diceRoll;
currentScore_0El.textContent = currentScore;
diceImg.src = `dice-${diceRoll}.png`;
}
document.querySelector (".btn--roll").addEventListener("click",rollDiceFunc);

// Implementing Hold button function;
const holdFunc = function () {
  
  score = score + currentScore;
  player1Score_El.textContent = score;
  // console.log(player1Score_El);
  
  currentScore = 0;
  currentScore_0El.textContent = currentScore;
}
document.querySelector (".btn--hold").addEventListener ("click", holdFunc);

这是解决问题后的代码：

'use strict';
//setting the needed variables;
let score = 0;
let currentScore = 0;
let currentScore_0El = document.getElementById ("current--0");
let player1Score_El = document.getElementById ("score--0");
let diceImg = document.querySelector (".dice");

 player1Score_El.textContent = 0;

//Setting roll dice button functionl;
const rollDiceFunc = function () {
const diceRoll = Math.trunc(Math.random() * 6) + 1;
currentScore += diceRoll;
currentScore_0El.textContent = currentScore;
diceImg.src = `dice-${diceRoll}.png`;
}
document.querySelector (".btn--roll").addEventListener("click",rollDiceFunc);

// Implementing Hold button function;
const holdFunc = function () {
  
  score = score + currentScore;
  player1Score_El.textContent = score;
  // console.log(player1Score_El);
  
  currentScore = 0;
  currentScore_0El.textContent = currentScore;
}
document.querySelector (".btn--hold").addEventListener ("click", holdFunc);

我需要了解为什么在变量声明中它不起作用，而当我在另一行中重新分配 player1Score_El 变量的值时它起作用了？

Answer 1

= 求值为分配给它的值。即：

leftHandExpression1 = leftHandExpression2 = someExpression
// equivalent to
leftHandExpression1 = (leftHandExpression2 = someExpression)
// equivalent to
leftHandExpression2 = someExpression;
leftHandExpression1 = someExpression; // assuming no side-effects

在您的代码中，您将 0 分配给文本内容，因此这就是分配给 player1Score_El 的内容。将它分开，这样就没有链式 =s 解决了这个问题，因为 player1Score_El 是一个实际元素，而不是 0.

我建议永远不要将 = 链接在一个语句中 - 它读起来很混乱，而且通常是拼写错误或错误。

.text 内容的不明确行为

Unclear behavior of .text Content

html

javascript

dom-events