Блог

Я немного попрактиковался в изменении содержимого lt;pgt; элемента с помощью .textContent и сначала присвоил весь элемент переменной let

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

Проблема возникает позже, когда мне нужно изменить содержимое внутри функции, используя другую переменную, которая содержит числовое значение при нажатии кнопки с addEventListener :

 player1Score_El.textContent = score;  

затем в консоли я получаю сообщение об ошибке:

script.js:23 Неперехваченная ошибка типа: Не удается создать свойство «textContent» под номером «0» в HTMLButtonElement.holdFunc (script.js:23)

Я решил проблему, удалив .textContent = 0; из player1Score_El объявления переменной, а затем снова переназначив содержимое переменной в глобальной области со значением 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 переменной в другой строке, это сработало?

= оценивает значение, присвоенное ему. То есть:

 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.

Я бы рекомендовал никогда не связывать = буквы s в одном операторе — это сбивает с толку при чтении и очень часто является опечаткой или ошибкой.