无法读取未定义错误的属性'remove‘

Question

这是参考我之前提出的关于使用Javascript的石头，布，剪刀游戏的问题。我有3个独立的图像描绘岩石，布和剪刀在我的HTML和一个开始按钮。当我单击start按钮时，start.addEventListener应该会触发，并将用户和计算机指针设置为0。我有3个独立的函数-当用户点击岩石图像时的rockFunc()，当用户单击纸张图像时的paperFunc()和当用户单击剪刀图像时的scissorFunc()。这些函数中的每一个都有一组条件。在每个if-else-if语句的块中，都有一个对finalDisplay()函数的调用，该函数显示用户和计算机点。它还应该显示计算机从列表(choiceList)中随机生成的选择。这里的问题是，每当我试图运行命令choiceDisplay.remove()时，都会得到一个错误，该命令指出choiceDisplay变量是未定义的。我已经附上了Javascript和下面的HTML代码。

​

const rock = document.getElementById('rock');
const scissor = document.getElementById('scissor');
const paper = document.getElementById('paper');
const start = document.getElementById('start')
const main = document.getElementById('main-container');

var userPoints, computerPoints;

var firstDisplay, choiceDisplay; // firstDisplay to display the user's and computer's points. 

// choiceDisplay to display what the computer has chosen

var choiceList = ['rock', 'paper', 'scissor']; //choiceList from which the computer gets a random choice

var computerChoice;

// when the user clicks on the start button
start.addEventListener('click', function() {
  userPoints = 0;
  computerPoints = 0;
  firstDisplay = document.createElement('div');
  const text = document.createTextNode(`Computer: ${computerPoints}  User: ${userPoints}`);
  firstDisplay.classList.add('displayinitial');
  firstDisplay.appendChild(text);
  main.appendChild(firstDisplay);

})

// function to take care of displaying the user's & computer's points, and to display the computer's choice
function finalDisplay(userPoints, computerPoints, computerChoice) {
  firstDisplay = document.createElement('div');
  const text = document.createTextNode(`Computer: ${computerPoints}  User: ${userPoints}`);
  firstDisplay.classList.add('displayinitial');
  firstDisplay.appendChild(text);
  main.appendChild(firstDisplay);
  choiceDisplay = document.createElement('div');
  const displayChoice = document.createTextNode(`Computer chose ${computerChoice} `);
  choiceDisplay.classList.add('finaldisplay');
  choiceDisplay.appendChild(displayChoice);
  main.appendChild(choiceDisplay);
  // firstDisplay.remove();
}

// if the user clicks on rock

function rockFunc() {

  computerChoice = choiceList[Math.floor(Math.random() * choiceList.length)];

  if (rock && computerChoice == 'scissor') {
    userPoints = userPoints + 1;
    firstDisplay.remove();
    choiceDisplay.remove();
    finalDisplay(userPoints, computerPoints, computerChoice);
  } else if (rock && computerChoice == 'paper') {
    computerPoints = computerPoints + 1;
    firstDisplay.remove();
    choiceDisplay.remove();
    finalDisplay(userPoints, computerPoints, computerChoice);
  } else {
    alert("Play Again");
    firstDisplay.remove();
    // choiceDisplay.remove();
    // finalDisplay(userPoints, computerPoints, computerChoice);
  }
}

// when user clicks on paper
function paperFunc() {
  computerChoice = choiceList[Math.floor(Math.random() * choiceList.length)];

  if (paper && computerChoice == 'rock') {
    userPoints = userPoints + 1;
    firstDisplay.remove();
    choiceDisplay.remove();
    finalDisplay(userPoints, computerPoints, computerChoice);
  } else if (paper && computerChoice == 'scissor') {
    computerPoints = computerPoints + 1;
    firstDisplay.remove();
    choiceDisplay.remove();
    finalDisplay(userPoints, computerPoints, computerChoice);
  } else {
    alert("Play Again");
    firstDisplay.remove();
    // choiceDisplay.remove();
    // finalDisplay(userPoints, computerPoints, computerChoice);
  }
}

// when user clicks on scissor

function scissorFunc() {

  computerChoice = choiceList[Math.floor(Math.random() * choiceList.length)];

  if (scissor && computerChoice == 'paper') {
    userPoints = userPoints + 1;
    firstDisplay.remove();
    choiceDisplay.remove();
    finalDisplay(userPoints, computerPoints, computerChoice);
  } else if (scissor && computerChoice == 'rock') {
    computerPoints = computerPoints + 1;
    firstDisplay.remove();
    choiceDisplay.remove();
    finalDisplay(userPoints, computerPoints, computerChoice);
  } else {
    alert("Play Again");
    firstDisplay.remove();
    // choiceDisplay.remove();
    // finalDisplay(userPoints, computerPoints, computerChoice);
  }
}

rock.addEventListener('click', function() {
  rockFunc();
})

scissor.addEventListener('click', function() {
  scissorFunc();
})

paper.addEventListener('click', function() {
  paperFunc();
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rock,Paper,Scissors</title>
  <link rel="stylesheet" href="/rock-paper-scissors/styles.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
  <div class="main-container" id="main-container">
    <div class="heading-content">
      <h1>Rock, Paper, Scissors Game!</h1>
    </div>

    <div class="button">
      <button type="button" class="btn btn-primary" id="start">Start</button>
    </div>

    <div class="main-content">
      <img src="/rock-paper-scissors/images/rock.png" alt="rock" class="game" id="rock">
      <img src="/rock-paper-scissors/images/scissor.png" alt="Scissors" class="game" id="scissor">
      <img src="/rock-paper-scissors/images/paper.png" alt="paper" class="game" id="paper">
    </div>
  </div>

  <script src="/rock-paper-scissors/script.js"></script>
</body>

</html>

​

Answer 1

错误是因为您在调用finalDisplay()之前执行了choiceDisplay.remove()，但该函数是您分配choiceDisplay的地方。

但是，不需要添加和删除DIV，只需在HTML中静态地创建它，并更新它的内容。

​

const rock = document.getElementById('rock');
const scissor = document.getElementById('scissor');
const paper = document.getElementById('paper');
const start = document.getElementById('start')
const main = document.getElementById('main-container');
const choiceDisplay = document.getElementById('choice-display');
const firstDisplay = document.getElementById('first-display');

var userPoints, computerPoints;

var choiceList = ['rock', 'paper', 'scissor']; //choiceList from which the computer gets a random choice

var computerChoice;

// when the user clicks on the start button
start.addEventListener('click', function() {
  userPoints = 0;
  computerPoints = 0;
  firstDisplay.classList.add('displayinitial');
  firstDisplay.innerText = `Computer: ${computerPoints}  User: ${userPoints}`;
})

// function to take care of displaying the user's & computer's points, and to display the computer's choice
function finalDisplay(userPoints, computerPoints, computerChoice) {
  firstDisplay.classList.add('displayinitial');
  firstDisplay.innerText = `Computer: ${computerPoints}  User: ${userPoints}`;
  const displayChoice = document.createTextNode(`Computer chose ${computerChoice} `);
  choiceDisplay.classList.add('finaldisplay');
  choiceDisplay.innerText = `Computer chose ${computerChoice} `;
}

// if the user clicks on rock

function rockFunc() {

  computerChoice = choiceList[Math.floor(Math.random() * choiceList.length)];

  if (rock && computerChoice == 'scissor') {
    userPoints = userPoints + 1;
    finalDisplay(userPoints, computerPoints, computerChoice);
  } else if (rock && computerChoice == 'paper') {
    computerPoints = computerPoints + 1;
    finalDisplay(userPoints, computerPoints, computerChoice);
  } else {
    alert("Play Again");
  }
}

// when user clicks on paper
function paperFunc() {
  computerChoice = choiceList[Math.floor(Math.random() * choiceList.length)];

  if (paper && computerChoice == 'rock') {
    userPoints = userPoints + 1;
    finalDisplay(userPoints, computerPoints, computerChoice);
  } else if (paper && computerChoice == 'scissor') {
    computerPoints = computerPoints + 1;
    finalDisplay(userPoints, computerPoints, computerChoice);
  } else {
    alert("Play Again");
  }
}

// when user clicks on scissor

function scissorFunc() {

  computerChoice = choiceList[Math.floor(Math.random() * choiceList.length)];

  if (scissor && computerChoice == 'paper') {
    userPoints = userPoints + 1;
    finalDisplay(userPoints, computerPoints, computerChoice);
  } else if (scissor && computerChoice == 'rock') {
    computerPoints = computerPoints + 1;
    finalDisplay(userPoints, computerPoints, computerChoice);
  } else {
    alert("Play Again");
  }
}

rock.addEventListener('click', function() {
  rockFunc();
})

scissor.addEventListener('click', function() {
  scissorFunc();
})

paper.addEventListener('click', function() {
  paperFunc();
})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rock,Paper,Scissors</title>
  <link rel="stylesheet" href="/rock-paper-scissors/styles.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
  <div class="main-container" id="main-container">
    <div class="heading-content">
      <h1>Rock, Paper, Scissors Game!</h1>
    </div>

    <div class="button">
      <button type="button" class="btn btn-primary" id="start">Start</button>
    </div>

    <div class="main-content">
      <img src="/rock-paper-scissors/images/rock.png" alt="rock" class="game" id="rock">
      <img src="/rock-paper-scissors/images/scissor.png" alt="Scissors" class="game" id="scissor">
      <img src="/rock-paper-scissors/images/paper.png" alt="paper" class="game" id="paper">
    </div>
    <div id="first-display"></div>
    <div id="choice-display"></div>
  </div>

  <script src="/rock-paper-scissors/script.js"></script>
</body>

</html>

​