无法弄清楚如何使按钮更改数组编号

Question

我可能把这个复杂化了，但我终究无法弄清楚如何通过单击按钮来更改 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>

Answer 1

无需硬编码 humanChoice，您可以将 event 对象从点击事件传递到 compareChoices 函数，然后获取 humanChoice 使用 event.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>

无法弄清楚如何使按钮更改数组编号

Can't figure out how to make buttons change array number

javascript

arrays

function

object

button