為什么單擊按鈕后函式不執行？-有解無憂

我正在嘗試撰寫一個非常簡單的剪刀石頭布游戲，但我遇到了一個問題，即最終按鈕只有在您沒有點擊石頭、剪紙或剪刀按鈕時才有效。

單擊任何其他按鈕后，最終按鈕將不再起作用。

當我手動更改播放器和計算機變數時，該compareChoices功能似乎有效，但如果按鈕功能更改它們則無效。

如果我將 var 設定為選項 [0]，則按鈕可以作業，但會輸出錯誤的答案。

這是我的 Web 應用程式和相關腳本：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Rock, Paper, Scissors</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Fredoka One&display=swap" rel="stylesheet">
</head>
<body>
    <h1 class="title">Lapis, Papyrus, Scalpellus</h1>
    <p class="fate">Fiat Fatum Decernere</p>
    <p class="decission"></p>
    <br/>
    <button class="rock" id="btn"></button>
    <button class="paper" id="btn"></button>
    <button class="scissors" id="btn"></button>
    <br/>
    <button class="final" id="btn">Final Answer</button>
    <div class="results"></div>
</body>
</html>

function playRPS() {
    const choices = ["Lapis", "Papyrus", "Scalpellus"]  
    var player = null;
    var computer = null;
    function computerChooses() {
        let computer = choices[Math.floor(Math.random() * choices.length)];
        console.log(computer);
    }
    document.querySelector(".rock").addEventListener("click", computerChooses);
    document.querySelector(".paper").addEventListener("click", computerChooses);
    document.querySelector(".scissors").addEventListener("click", computerChooses);
    function rockBtn(){
        player = choices[0];
        console.log(player);
    } 
    document.querySelector(".rock").addEventListener("click", rockBtn);  
    function paperBtn(){
        player = choices[1];
        console.log(player);
    } 
    document.querySelector(".paper").addEventListener("click", paperBtn); 
    function scissorBtn() {
        player = choices[2];
        console.log(player);
    }
    document.querySelector(".scissors").addEventListener("click", scissorBtn);
    function compareChoices() {  
        if(computer === player) {
            console.log("Tie!");  
        } else
        if(computer == choices[0]) {
            if(player == choices[1]) {
                console.log("You Won!");
            } else {
                console.log("Computer Won!");
            }
        } else
        if(computer == choices[1]) {
            if(player == choices[2]) {
                console.log("You Won!");
            } else {
                console.log("Computer Won!");
            }
        } else
        if(computer == choices[2]) {
            if(player == choices[0]) {
                console.log("You Won!");
            } else {
                console.log("Computer Won!");
            }
        }
    }  
    document.querySelector(".final").addEventListener("click", compareChoices);
}
playRPS();

uj5u.com熱心網友回復：

您不能兩次使用這種系結元素，一次用于“玩家選擇”，另一次用于“計算機選擇”。

其實沒必要把電腦的選擇想象成事件驅動的，也不需要“Final answer”按鈕：電腦選擇必須在用戶選擇之后自動進行，并導致顯示結果。

您應該compareChoices()在用戶單擊三個按鈕之一后立即執行。在該函式中，您可以呼叫computerChooses()并檢查結果。

function playRPS() {

  const choices = ["Lapis", "Papyrus", "Scalpellus"]

  const resultsDiv = document.querySelector('.results')

  var player = null;
  var computer = null;


  function computerChooses() {
    computer = choices[Math.floor(Math.random() * choices.length)];
  }

  function rockBtn() {
    player = choices[0];
    compareChoices()
  }
  document.querySelector(".rock").addEventListener("click", rockBtn);

  function paperBtn() {
    player = choices[1];
    compareChoices()
  }
  document.querySelector(".paper").addEventListener("click", paperBtn);

  function scissorBtn() {
    player = choices[2];
    compareChoices()
  }
  document.querySelector(".scissors").addEventListener("click", scissorBtn);

  function compareChoices() {
    computerChooses()
    
    resultsDiv.innerHTML = ''

    resultsDiv.innerHTML  = "<br>You: "   player
    resultsDiv.innerHTML  = "<br>Computer: "   computer

    let results = ''
    
    if (computer === player) {
      results = "Tie!";
    } else if (computer == choices[0]) {
      if (player == choices[1]) {
        results = "You Won!";
      } else {
        results = "Computer Won!";
      }
    } else if (computer == choices[1]) {
      if (player == choices[2]) {
        results = "You Won!";
      } else {
        results = "Computer Won!";
      }
    } else if (computer == choices[2]) {
      if (player == choices[0]) {
        results = "You Won!";
      } else {
        results = "Computer Won!";
      }
    }
    
    resultsDiv.innerHTML  = "<br>"   results
  }
}
playRPS();

<h1 class="title">Lapis, Papyrus, Scalpellus</h1>
<p class="fate">Fiat Fatum Decernere</p>
<p class="decission"></p>
<br/>
<button class="rock" id="btn">Lapis</button>
<button class="paper" id="btn">Papyrus</button>
<button class="scissors" id="btn">Scalpellus</button>
<br/>
<div class="results">
</div>

uj5u.com熱心網友回復：

您可以使用嵌套的 switch 陳述句來確定獲勝條件。

注意：避免使用類名并改用資料屬性。

const results = document.querySelector('.results');

const choices = ['rock', 'paper', 'scissors'];

const dictionary = {
  paper: 'Papyrus',
  rock: 'Lapis',
  scissors: 'Scalpellus'
}

const playRPS = () => {
  document.querySelectorAll('[data-choice]')
    .forEach(choice =>
      choice.addEventListener('click', handleChoice));
};

const handleChoice = (e) => {
  const player = e.target.getAttribute('data-choice');
  const computer = randChoice();
  
  results.innerHTML = JSON.stringify({
    player: dictionary[player],
    computer: dictionary[computer],
    result: compareChoices(player, computer),
  })
};

const compareChoices = (player, computer) => {
  switch (didWin(player, computer)) {
    case -1 : return "Computer Won!";
    case  0 : return "Tie!";
    case  1 : return "You Won!";
  }
};

const didWin = (attacker, defender) => {
  switch (attacker) {
    case 'rock':
      switch (defender) {
        case 'rock'     : return  0;
        case 'paper'    : return -1;
        case 'scissors' : return  1;
      }
    case 'paper':
      switch (defender) {
        case 'rock'     : return  1;
        case 'paper'    : return  0;
        case 'scissors' : return -1;
      }
    case 'scissors':
      switch (defender) {
        case 'rock'     : return -1;
        case 'paper'    : return  1;
        case 'scissors' : return  0;
      }
  }
  throw new Error('Illegal input');
};

const randChoice = () =>
  choices[Math.floor(Math.random() * choices.length)];

playRPS();

body {
  font-family: "Fredoka One";
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka One&display=swap" rel="stylesheet">

<h1 class="title">Lapis, Papyrus, Scalpellus</h1>
<p class="fate">Fiat Fatum Decernere</p>
<p class="decission"></p>
<br />
<button data-choice="rock">Lapis</button>
<button data-choice="paper">Papyrus</button>
<button data-choice="scissors">Scalpellus</button>
<br /><br />
<div class="results"></div>

uj5u.com熱心網友回復：

在 computerChooses 函式中取出 let 起作用了！謝謝你！

我對此也很陌生，所以還沒有最佳實踐。我想我解決了系結元素問題？這看起來怎么樣？

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Rock, Paper, Scissors</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Fredoka One&display=swap" rel="stylesheet">
</head>
<body>
   <h1 class="title">Lapis, Papyrus, Scalpellus</h1>
     <p class="fate">Fiat Fatum Decernere</p>
  <p class="decission"></p>
  <br/>
     <button class="rock"></button>
     <button class="paper"></button>
     <button class="scissors"></button>
</body>
</html>

function playRPS() {
  
const choices = ["Lapis", "Papyrus", "Scalpellus"]
  
var player = null;
var computer = null;

function compareChoices (){  
  if(computer === player){
    console.log("Tie!");
    document.querySelector(".decission").innerText = "Tie!";
  }else if(computer == choices[0]){
    if(player == choices[1]){
      console.log("You Won!");
      document.querySelector(".decission").innerText = "You Win!";
    }else{
      console.log("Computer Won!");
      document.querySelector(".decission").innerText = "Computer Wins!";
    }
  } 
  else if(computer == choices[1]){
    if(player == choices[2]){
      console.log("You Won!");
      document.querySelector(".decission").innerText = "You Win!";
    }else{
      console.log("Computer Won!");
      document.querySelector(".decission").innerText = "Computer Wins!";
    }
  } 
  else if(computer == choices[2]){
    if(player == choices[0]){
      console.log("You Won!");
      document.querySelector(".decission").innerText = "You Win!";
    }else{
      console.log("Computer Won!");
      document.querySelector(".decission").innerText = "Computer Wins!";
    }
  }
}

function computerChooses(){
  computer = choices[Math.floor(Math.random() * choices.length)];
  console.log(computer);
}

function rockBtn(){
  player = choices[0];
  console.log(player);
} 
document.querySelector(".rock").addEventListener("click", () => {
  rockBtn();
  computerChooses();
  compareChoices();
});
  
function paperBtn(){
  player = choices[1];
  console.log(player);
} 
document.querySelector(".paper").addEventListener("click", () => {
  paperBtn();
  computerChooses();
  compareChoices();
});
  
function scissorBtn(){
  player = choices[2];
  console.log(player);
} 
document.querySelector(".scissors").addEventListener("click", () => {
  scissorBtn();
  computerChooses();
  compareChoices();
});
}
playRPS();

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

標籤：javascripthtml

上一篇：將div放在同一級別

下一篇：為什么我的背景圖片不顯示？