為什么我的石頭剪刀布在第一次點擊時不起作用，游戲運行良好但第一次點擊沒有任何反應-有解無憂

如標題中所述，由于某種原因，您第一次單擊它不起作用，但第二次單擊通過并且游戲開始正常運行，有人可以解釋為什么嗎？用我的菜鳥大腦無法弄清楚：

游戲邏輯作業得很好，我知道我已經繞道而行了，但請原諒我仍然是菜鳥，并計劃繼續迭代以提高效率。

我是在應用樣式以在錯誤的位置顯示結果，還是您能指出為什么它不能立即開始游戲？

const pickIcon = document.getElementsByClassName('icons');
const pickWord = document.getElementsByClassName('word-choice');
const rockWord = document.getElementById('rock-word');
const paperWord = document.getElementById('paper-word');
const scissorsWord = document.getElementById('scissors-word');
// const resultContainer = document.getElementById('result');
let picksDisplay = document.getElementById('picks');
let resultDisplay = document.getElementById('winner-result');
let resultShow = document.getElementById('result-game');

let userPickIcon = ''
let userPick = ''
let compPick = ''

function playGame() {

  //player pick
  for (let i = 0; i < pickIcon.length; i  ) {
    pickIcon[i].addEventListener('click', function() {
      document.getElementById('result').style.display = 'block';
      if (pickIcon[i] === pickIcon[0] || pickIcon[i] === pickIcon[3]) {
        userPickIcon = 'rock'
        picksDisplay.innerText = `Player picked ${userPickIcon}`
      } else if (pickIcon[i] === pickIcon[1] || pickIcon[i] === pickIcon[4]) {
        userPickIcon = 'paper'
        picksDisplay.innerText = `Player picked ${userPickIcon}`
      } else if (pickIcon[i] === pickIcon[2] || pickIcon[i] === pickIcon[5]) {
        userPickIcon = 'scissors'
        picksDisplay.innerText = `Player picked ${userPickIcon}`
      }
    })
  }

  // computer randomised pick
  let computerChoice = Math.floor(Math.random() * 3);
  if (computerChoice === 0) {
    compPick = 'rock'
    resultDisplay.innerText = `Computer picked ${compPick}`
  } else if (computerChoice === 1) {
    compPick = 'paper'
    resultDisplay.innerText = `Computer picked ${compPick}`
  } else if (computerChoice === 2) {
    compPick = 'scissors'
    resultDisplay.innerText = `Computer picked ${compPick}`
  }

  //gamelogic
  if (userPickIcon === compPick) {
    resultShow.innerText = `The game is a tie!!!`
  } else {
    if (userPickIcon === 'rock') {
      if (compPick === 'paper') {
        resultShow.innerText = `Computer is the winner, Sorry :(`
      } else {
        resultShow.innerText = `The Player is the winner, Congratulations!!`
      }
    };

    if (userPickIcon === 'paper') {
      if (compPick === 'scissors') {
        resultShow.innerText = `Computer is the winner, Sorry :(`
      } else {
        resultShow.innerText = `The Player is the winner, Congratulations!!`
      }
    };

    if (userPickIcon === 'scissors') {
      if (compPick === 'rock') {
        resultShow.innerText = `Computer is the winner, Sorry :(`
      } else {
        resultShow.innerText = `The Player is the winner, Congratulations!!`
      }
    }
  }


}

document.addEventListener('click', playGame);

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&family=Roboto Mono&display=swap');
body {
  background-color: #16213E;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}

.container {
  background-color: #fff;
  margin: 40px auto;
  width: 500px;
  color: #16213E;
}

.icons-div {
  display: flex;
  align-items: center;
  justify-content: center;
}

i {
  padding: 25px;
  font-size: 70px;
  color: #277BC0;
}

i:hover {
  color: #1CD6CE;
  cursor: pointer;
}

.word-choice:hover {
  color: #1CD6CE;
  cursor: pointer;
}

.title-div {
  background-color: #277BC0;
  padding: 10px 0;
  color: #fff;
}

.results {
  background-color: #fff;
  width: 500px;
  margin: 40px auto;
  height: 200px;
  display: none;
}

.result-items {
  padding-top: 20px;
  color: #16213E;
}

#result-game {
  color: #495C83;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>


<div class="container">
  <div class="title-div">
    <h2>Rock, Paper, Scissors</h2>
  </div>
  <div class="choices-title">
    <h2>Make your choice</h2>
  </div>
  <div class="icons-div">
    <table>
      <tr>
        <td><i class="fa-solid fa-hand-back-fist icons" id="rock-btn"></i></td>
        <td><i class="fa-solid fa-hand icons" id="paper-btn"></i></td>
        <td><i class="fa-solid fa-hand-scissors icons" id="scissors-btn"></i></td>
      </tr>
      <tr>
        <td>
          <h3 id="rock-word" class="word-choice icons">Rock</h3>
        </td>
        <td>
          <h3 id="paper-word" class="word-choice icons">Paper</h3>
        </td>
        <td>
          <h3 id="scissors-word" class="word-choice icons">Scissors</h3>
        </td>
      </tr>
    </table>
  </div>
</div>

<div class="results" id="result">
  <div class="result-items">
    <h3 id="picks"></h3>
    <h3 id="winner-result"></h3>
    <h2 id="result-game"></h2>
  </div>
</div>

uj5u.com熱心網友回復：

您eventListener在整個檔案中添加了一個：
document.addEventListener('click', playGame);

playGame如果單擊任何內容，然后呼叫該函式。playGame只有eventListeners在您第一次單擊稱為playGame.

uj5u.com熱心網友回復：

正如我在評論中已經說過的，存在很多問題。我不會解決所有問題，例如語意和可訪問性問題，因為這會破壞答案的比例（將其作為閱讀并在未來處理它的提示）。

你有一個文本和一個可以點擊的圖示。這意味著雖然您仍然只有 3 個選項可以使您有 6 個可以單擊的元素。這使必要的邏輯過于復雜。換句話說，您需要檢查的元素數量是必要數量的兩倍。我現在將其更改為eventListener收聽包含圖示和文本的容器。
您使用選擇了所有要檢查的eventListener元素getElementsByClassName。不幸的是，這會回傳一個 HTML 集合物件。for因此，您必須使用-loop遍歷該物件。這是非常低效的并且也使問題過于復雜。聰明而干凈的解決方案是使用querySelectorAll它將回傳一個節點串列。NodeList 可以迭代，forEach它比for-loop 作業得更快并且更短。
你嵌套了很多 -if/else陳述句。這是低效的，switch- 陳述句和/或三元條件運算子可以解決。

現在回到實際問題：你讓整個邏輯在一個函式中運行。是在eventListener函式內部。因此，您必須先單擊檔案以運行該功能，然后該功能將開始列出選項的單擊事件。這就是為什么您需要在開始時額外點擊的原因。

如果您按上述方式撰寫了 clean 程式，則您EventListener在前面有并在單擊其中一個選項時啟動該功能。這就是我在評論中的意思，如果您在腳本性能方面解決了主要問題，實際問題將自行解決。

document.querySelectorAll('button').forEach(el =>
  el.addEventListener('click', function(e) {
    let playerChoice = e.currentTarget.id;
    let userPick = '';
    let computerPick = '';
    
    // Get User Pick
    switch (playerChoice) {
      case 'rock-btn':
        userPick = 'Rock';
        break;
      case 'paper-btn':
        userPick = 'Paper';
        break;
      case 'scissors-btn':
        userPick = 'Scissors';
        break;
    };
    document.querySelector('#picks').textContent = `Player picked ${userPick}`;
         
    // computer randomised pick 
    let computerChoice = Math.floor(Math.random() * 3);
    switch (computerChoice) {
      case 0:
        computerPick = 'Rock';
        break;
      case 1:
        computerPick = 'Paper';
        break;
      case 2:
        computerPick = 'Scissors';
        break;
    };
    document.querySelector('#winner-result').textContent = `Computer picked ${computerPick}`; 
    
    // game logic to check who wins;
    let result = '';
    if (userPick === computerPick) {
      result = 'draw';
    } else {
      switch (userPick) {
        case 'Rock':
          result = (computerPick === 'Scissors') ? 'win' : 'lose';
          break;
        case 'Paper':
          result = (computerPick === 'Rock') ? 'win' : 'lose';
          break;
        case 'Scissors':
          result = (computerPick === 'Paper') ? 'win' : 'lose';
          break;
       };
    };
    
    // output for winner
    let resultText = '';
    switch (result) {
      case 'draw':
        resultText = 'The game is a tie!!!';
        break;
      case 'win':
        resultText = 'The Player is the winner, Congratulations!!';
        break;
      case 'lose':
        resultText = 'The Computer is the winner, Sorry :(';
        break;
    };
    document.querySelector('#result-game').textContent = resultText;

    // makes the result box visible
    document.querySelector('#result').classList.remove('d-none');
  })
)

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&family=Roboto Mono&display=swap');
body {
  background-color: #16213E;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}

.container {
  background-color: #fff;
  margin: 40px auto;
  width: 500px;
  color: #16213E;
}

.icons-div {
  display: flex;
  align-items: center;
  justify-content: center;
}

i {
  padding: 25px;
  font-size: 70px;
  color: #277BC0;
}

button {
  border: none;
  background: transparent;
}

.icons-div > button:hover,
.icons-div > button:hover i,
.icons-div > button:hover h3 {
  color: #1CD6CE;
  cursor: pointer;
}

.title-div {
  background-color: #277BC0;
  padding: 10px 0;
  color: #fff;
}

.results {
  background-color: #fff;
  width: 500px;
  margin: 40px auto;
  height: 200px;
}

.result-items {
  padding-top: 20px;
  color: #16213E;
}

.d-none {
  display: none;
}

#result-game {
  color: #495C83;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>


<div class="container">
  <div class="title-div">
    <h2>Rock, Paper, Scissors</h2>
  </div>
  <div class="choices-title">
    <h2>Make your choice</h2>
  </div>
  <div class="icons-div">
    <button id="rock-btn">
      <i class="fa-solid fa-hand-back-fist icons"></i>
      <h3 class="word-choice icons">Rock</h3>
    </button>
    <button id="paper-btn">
      <i class="fa-solid fa-hand icons"></i>
      <h3 class="word-choice icons">Paper</h3>
    </button>
    <button id="scissors-btn">
      <i class="fa-solid fa-hand-scissors icons"></i>
      <h3 class="word-choice icons">Scissors</h3>
    </button>
  </div>
</div>

<div class="results  d-none" id="result">
  <div class="result-items">
    <h3 id="picks"></h3>
    <h3 id="winner-result"></h3>
    <h2 id="result-game"></h2>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/510238.html

標籤：javascripthtmlcssdom

上一篇：如何將KeyUp事件添加到動態添加的INPUT

下一篇：無法理解JQuery和一些javascript