Unclear behavior of .text Content-CodePudding

I was making some practice to change the content of a <p> element using the .textContent and firstly I assigned the whole element to a let variable

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

The issue comes later when I need to change the content inside a function using another variable that carry a number value when clicking a button with addEventListener:

player1Score_El.textContent = score;

then in console I get the error message:

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

I solved the issue by removing the .textContent = 0; from the player1Score_El variable declaration, and then reassigning the content again to the variable in global scope with 0 value.

Ok well. I will insert the code with the issue and the code after I fixed it.

Here the code with issue:

'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);

and here is the code after fixing the issue:

'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);

What I need to understand why in variable declaration it doesn't work and when I reassign the value of the player1Score_El variable in another line then it worked?

CodePudding user response：

= evaluates to the value assigned to it. That is:

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

In your code, you're assigning 0 to the text content, so that's what gets assigned to player1Score_El. Separating it out so there aren't chained =s fixes the problem because then player1Score_El is an actual element, not the 0.

I'd recommend never chaining =s in a single statement - it's confusing to read and is very often a typo or mistake.