时间戳

首页 > 解决方案 > 使用 onClick 事件更改对象值

javascript - 使用 onClick 事件更改对象值

问题描述

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

我正在制作一个石头剪刀布游戏，并且想在按下按钮时更改 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()

标签： javascriptobjectonclick

解决方案

您可以使用以下内容来保持代码简单：

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/

推荐阅读