無法弄清楚如何使按鈕更改陣列編號

我可能過于復雜了，但我一生都無法弄清楚如何通過單擊按鈕來更改humanChoice。我只是想在開課前完成我的石頭、紙、剪刀專案。我對這段代碼做錯了什么？

let humanObject = {
  humanChoice: null
};
let computerObject = {
  computerChoice: null
};
const choices = ["Lapis", "Papyrus", "Scalpellus"];

humanObject.humanChoice = choices[0];

function computerChooses() {
  const rpsGo = Math.floor(Math.random() * choices.length);
  computerObject.computerChoice = choices[rpsGo];
}

function compareChoices() {

  computerChooses();
  if (computerObject.computerChoice === humanObject.humanChoice) {
    document.getElementById('results').innerHTML = "TIE! Both you and your opponent have chosen "   computerObject.computerChoice   "!";
  } else if (computerObject.computerChoice === choices[0]) {
    if (humanObject.humanChoice === choices[1]) {
      document.getElementById('results').innerHTML = "Congratulations! You're the winner! Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice;
    } else {
      document.getElementById('results').innerHTML = "Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice   ". You lose!";
    }
  } else if (computerObject.computerChoice === choices[1]) {
    if (humanObject.humanChoice === choices[2]) {
      document.getElementById('results').innerHTML = "Congratulations! You're the winner! Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice;
    } else {
      document.getElementById('results').innerHTML = "Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice   ". You lose!";
    }
  } else if (computerObject.computerChoice === choices[2]) {
    if (humanObject.humanChoice === choices[0]) {
      document.getElementById('results').innerHTML = "Congratulations! You're the winner! Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice;
    } else {
      document.getElementById('results').innerHTML = "Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice   ". You lose!";
    }
  }
}

document.querySelector('#L').addEventListener('click', compareChoices);
document.querySelector('#P').addEventListener('click', compareChoices);
document.querySelector('#S').addEventListener('click', compareChoices);

<h1>LAPIS, PAPYRUS, SCALPELLUS</h1>
<h2>Choose your weapon, defeat your opponent!</h2>
<button ID=L>Lapis</button>
<button ID=P>Papyrus</button>
<button ID=S>Scalpellus</button>
<p>Results:</p>
<p ID=results></p>

uj5u.com熱心網友回復：

無需對humanChoice 進行硬編碼，您可以將event物件從 click 事件傳遞給compareChoices函式，然后使用獲取humanChoiceevent.target.textContent。

試試這個

let humanObject = {
    humanChoice: null
};
let computerObject = {
    computerChoice: null
};
const choices = ["Lapis", "Papyrus", "Scalpellus"];

// humanObject.humanChoice = choices[0];

function computerChooses() {
    const rpsGo = Math.floor(Math.random() * choices.length);
    computerObject.computerChoice = choices[rpsGo];
}

function compareChoices(event) {
    humanObject.humanChoice = event.target.textContent.trim();
    computerChooses();

    if (computerObject.computerChoice === humanObject.humanChoice) {
        document.getElementById('results').innerHTML = "TIE! Both you and your opponent have chosen "   computerObject.computerChoice   "!";
    } else if (computerObject.computerChoice === choices[0]) {
        if (humanObject.humanChoice === choices[1]) {
            document.getElementById('results').innerHTML = "Congratulations! You're the winner! Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice;
        } else {
            document.getElementById('results').innerHTML = "Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice   ". You lose!";
        }
    } else if (computerObject.computerChoice === choices[1]) {
        if (humanObject.humanChoice === choices[2]) {
            document.getElementById('results').innerHTML = "Congratulations! You're the winner! Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice;
        } else {
            document.getElementById('results').innerHTML = "Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice   ". You lose!";
        }
    } else if (computerObject.computerChoice === choices[2]) {
        if (humanObject.humanChoice === choices[0]) {
            document.getElementById('results').innerHTML = "Congratulations! You're the winner! Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice;
        } else {
            document.getElementById('results').innerHTML = "Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice   ". You lose!";
        }
    }
}

document.querySelector('#L').addEventListener('click', compareChoices);
document.querySelector('#P').addEventListener('click', compareChoices);
document.querySelector('#S').addEventListener('click', compareChoices);

<h1>LAPIS, PAPYRUS, SCALPELLUS</h1>
<h2>Choose your weapon, defeat your opponent!</h2>
<button id="L">Lapis</button>
<button id="P">Papyrus</button>
<button id="S">Scalpellus</button>
<p>Results:</p>
<p id="results"></p>

您可以通過將結果部分提取到它自己的函式來簡化代碼，如下所示

顯示代碼片段

let humanObject = {
    humanChoice: null
};
let computerObject = {
    computerChoice: null
};
const choices = ["Lapis", "Papyrus", "Scalpellus"];

// humanObject.humanChoice = choices[0];

function computerChooses() {
    const rpsGo = Math.floor(Math.random() * choices.length);
    computerObject.computerChoice = choices[rpsGo];
}

function result(choice) {
    if (humanObject.humanChoice === choice) {
        document.getElementById('results').innerHTML = "Congratulations! You're the winner! Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice;
    } else {
        document.getElementById('results').innerHTML = "Your opponent chose "   computerObject.computerChoice   " and you chose "   humanObject.humanChoice   ". You lose!";
    }
}

function compareChoices(event) {
    humanObject.humanChoice = event.target.textContent.trim();
    computerChooses();

    if (computerObject.computerChoice === humanObject.humanChoice) {
        document.getElementById('results').innerHTML = "TIE! Both you and your opponent have chosen "   computerObject.computerChoice   "!";
    } else if (computerObject.computerChoice === choices[0]) {
        result(choices[1]);
    } else if (computerObject.computerChoice === choices[1]) {
        result(choices[2]);
    } else if (computerObject.computerChoice === choices[2]) {
        result(choices[0]);
    }
}

document.querySelector('#L').addEventListener('click', compareChoices);
document.querySelector('#P').addEventListener('click', compareChoices);
document.querySelector('#S').addEventListener('click', compareChoices);

<h1>LAPIS, PAPYRUS, SCALPELLUS</h1>
<h2>Choose your weapon, defeat your opponent!</h2>
<button id="L">Lapis</button>
<button id="P">Papyrus</button>
<button id="S">Scalpellus</button>
<p>Results:</p>
<p id="results"></p>

標籤：javascript 数组 功能 目的 按钮

上一篇：在SwiftUI視圖中單擊按鈕時顯示NSMenu

下一篇：React-用按鈕隱藏內容