时间戳

首页 > 解决方案 > 无法读取未定义错误的属性“删除”

javascript - 无法读取未定义错误的属性“删除”

问题描述

这是参考我之前提出的关于使用 Javascript 的石头、纸、剪刀游戏的问题。我的 HTML 中有 3 张单独的图像，分别描绘了石头、纸和剪刀，还有一个开始按钮。当我单击开始按钮时，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>

标签： javascripthtmlcssfrontend

解决方案

错误是因为您choiceDisplay.remove()在调用之前执行了此操作finalDisplay()，但该函数是您分配的位置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>

推荐阅读