使用 onClick 事件更改对象值答案

【问题标题】：Changing object value with onClick event使用 onClick 事件更改对象值
【发布时间】：2020-03-15 10:53:45
【问题描述】：

很抱歉再次问这个问题，但我想为上下文添加更多代码。

我正在制作一个石头剪刀布游戏，并且想在按下按钮时更改 playerChoice 键。

我想为每个按钮添加一个 onclick 事件并运行一个函数来设置 playerChoice 属性，以便它引用 gameOptions 索引。


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>Lapis, Papyrus Scalpellus</h1>

<h2>Make a Choice</h2>
<button id="Lapis">Lapis</button>
<button id="Papyrus">Papyrus</button>
<button id=Scalpellus>Scalpellus</button>
<h2>Game Results</h2>

<script src="script.js"></script>

</body>
</html>


const gameOptions = ["Lapis", "Papyrus", "Scalpellus"];

const newChoice = randomChoice();

console.log(newChoice);

const humanPlayer = {
  playerChoice: gameOptions[0],
};

const computerPlayer = {
  playerChoice: randomChoice(),
};

document.querySelector("#Lapis").onclick = function() {
  humanPlayer.playerChoice = gameOptions[0];
};

document.querySelector("#Papyrus").onclick = function() {
  humanPlayer.playerChoice = gameOptions[1];
};
document.querySelector("#Scalpellus").onclick = function() {
  humanPlayer.playerChoice = gameOptions[2];
};

console.log(humanPlayer);

//Random Choice
function randomChoice() {
  const theChoice = gameOptions[Math.floor(Math.random() * 3)];
  return theChoice;
}

//Players 

function resultText(innerText){
  const paragraph = document.createElement('p');
  paragraph.innerText = innerText;
  document.body.appendChild(paragraph);
}


//Outcomes
function fight(){
  if(computerPlayer.playerChoice === humanPlayer.playerChoice){
     resultText("Its a Tie!20. You chose " + humanPlayer.playerChoice + " and the computer chose " + computerPlayer.playerChoice);
  }else if (computerPlayer.playerChoice === "Lapis"){
    if(humanPlayer.playerChoice === "Papyrus"){
     resultText("Human Player Wins!6. You chose " + humanPlayer.playerChoice + " and the computer chose " + computerPlayer.playerChoice);
    }else if( humanPlayer.playerChoice === "Scalpellus"){
       resultText("Computer Player Wins!5 You chose " + humanPlayer.playerChoice + " and the computer chose " + computerPlayer.playerChoice);

    }
  }else if(computerPlayer.playerChoice === "Papyrus"){
    if ( humanPlayer.playerChoice === "Lapis"){
      resultText("Compter Player Wins!4. You chose " + humanPlayer.playerChoice + " and the computer chose " + computerPlayer.playerChoice);

    }else if( humanPlayer.playerChoice === "Scalpellus"){
      resultText("Human Player Wins!3. You chose " + humanPlayer.playerChoice + " and the computer chose " + computerPlayer.playerChoice);

    }
  }else if(computerPlayer.playerChoice === "Scalpellus"){
    if ( humanPlayer.playerChoice === "Lapis"){
      resultText("Human Player Wins!2. You chose " + humanPlayer.playerChoice + " and the computer chose " + computerPlayer.playerChoice);

    }else if( humanPlayer.playerChoice === "Papyrus"){
      resultText("Computer Player Wins!1. You chose " + humanPlayer.playerChoice + " and the computer chose " + computerPlayer.playerChoice);
    }
  }
}

fight()

【问题讨论】：

那么到底是什么问题？你说“我想为每个按钮添加一个 onclick 事件并运行一个函数来设置 playerChoice 属性，以便它引用 gameOptions 索引。”而你正是这样做的。

标签： javascript object onclick

【解决方案1】：

您可以使用以下方法来简化代码：

var btns = document.querySelectorAll("button");
for (var i = 0; i < btns.length; i++){
  btns[i].addEventListener("click", btnHandler);
}

然后每次单击按钮时都会调用您的处理函数，而无需重复您的代码：

function btnHandler(el){
  switch (el.getAttribute("id")){
    case "Papyrus":
    ...
    default: break;
  }
}

它还允许您传递按钮元素本身，因此您可以在需要时拉出 ID 属性，而不必在单独的调用中为每个不同的实例传递参数。对于获胜条件检查，您可以通过简单地查看它们是否相等来消除几个“if”语句，如果它们不相等，则只需将人类选择与会击败它的计算机选择进行比较并由此设置结果。它可以进一步优化，但我想你想从中学到一些东西，所以我也评论了小提琴。

在这个例子中，我还将fight() 函数移到了按钮处理程序中，这样玩家就有了选择权，而计算机的选择也只会在那个时候被触发。您的原始代码中有一些实例调用了函数和设置变量，但没有使用它们等，还有一些语法错误。

见附上的小提琴： https://jsfiddle.net/s0toz3L8/2/

【讨论】：