Question

我在JS中有一个基本的“摇滚，纸张，剪刀”游戏的代码。它适用于promt但我希望能够通过按钮做出选择。我想使用“getElementById”和“addEventListener（”click“）”。有人能指出我正确的方向吗？

HTML：

  <button id ="rock"> Rock </button>

纸剪刀

JavaScript的：

var userChoice = prompt("Do you choose rock, paper or scissors?");



var computerChoice = Math.random();
 if (computerChoice < 0.34) {
  computerChoice = "rock";

} else if(computerChoice <= 0.67) {
  computerChoice = "paper";

} else {
computerChoice = "scissors";
 } console.log("Computer: " + computerChoice);


var compare = function (choice1, choice2) {
 if (choice1 === choice2) {
  return "The result is a tie!";
  } 

  else if (choice1 === "rock") {
    if (choice2 === "scissors") {
      return "rock wins";
  }
   else {
      return "paper wins";


  } if (choice1 === "paper") {
   if (choice2 === "rock") {
        return "paper wins";
    }
     else {
        return "scissors wins";


    } if (choice1 === "scissors") {
        if (choice2 === "rock") {
            return "rock wins";

        } else if (choice2 === "paper") {
            return "scissors wins";
        }
        }
        }
      }
  } 
   compare (userChoice, computerChoice);

Answer 1

在以下几个块中使用onclick事件处理程序（documentation）：

document.getElementById('rock').onclick = function(e){
  userChoice = 'rock'
}

Answer 2

以下是一个示例（点击“运行代码段”）：

document.getElementById('rock').onclick = user;
document.getElementById('paper').onclick = user;
document.getElementById('scissors').onclick = user;


function user(){
    var userChoice = this.id;
    console.log("User: " + userChoice)

    var computerChoice = Math.random();
         if (computerChoice < 0.34) {
             computerChoice = "rock";
          }else if(computerChoice <= 0.67) {
             computerChoice = "paper";
          }else{
             computerChoice = "scissors";
          }; 

    console.log("Computer: " + computerChoice);

    console.log(compare(userChoice, computerChoice)); 

    function compare(choice1, choice2) {
    
		    if (choice1 === choice2) {
            return "The result is a tie!";
        }
 
        if (choice1 === "rock") {
            if (choice2 === "scissors") {
                return "rock wins";
            }else{
                return "paper wins";
            }
				}
 
         if (choice1 === "paper") {
             if (choice2 === "rock") {
                 return "paper wins";
              } else {
                  return "scissors wins";
              }
		     }
		
		     if (choice1 === "scissors") {
             if (choice2 === "rock") {
                 return "rock wins";
             } else {
                 return "scissors wins";
            }
        }
    }
}

<button id="rock">Rock</button>
<button id="paper">Paper</button>
<button id="scissors">Scissor</button>

PS：在某些情况下，您的函数compare正在返回undefined。

JS - 摇滚，纸张，剪刀，按钮而不是提示

2 个答案: