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

时间：2020-11-07 07:12:09

标签： javascript html css frontend

这是参考我之前问过的有关使用Javascript进行石头，纸，剪刀游戏的问题。我有3张单独的图像，分别在HTML和一个开始按钮中描绘了石头，纸张和剪刀。当我单击开始按钮时，start.addEventListener应该会触发并将用户和计算机指向0。我有3个独立的功能-当用户单击岩石图像rockFunc()时，paperFunc()当用户单击纸张图像时，单击scissorFunc()；当用户单击剪刀图像时，单击finalDisplay()。这些功能中的每一个都有一组条件。在每个if-else-if语句的块中，都有一个对choiceList函数的调用，该函数显示用户和计算机点。它还应显示从列表（choiceDisplay.remove()）中随机生成的计算机选择。这里的问题是，每当尝试运行命令choiceDisplay时都会出错，该命令指出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(); })变量未定义。我已经在下面附加了Javascript和HTML代码。

<!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>
<div class="container">
   <h4>Heading</h4>
   <div class="row">
      <div class="col">
         1 of 2
      </div>
   </div>
</div>

1 个答案:

答案 0 :(得分：0)

错误是因为您在调用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>

相关问题
最新问题