Rock Paper Scissors游戏与Javacript

Question

我最近开始使用JavaScript进行编码，并决定制作一个游戏来测试我的知识。当我按下应该开始游戏的对象时，什么都没有发生，并且当我通过控制台发送信息时，（大多数时候）什么也没有发生。

const paper = document.getElementById('paper');
const scissor = document.getElementById('scissor');
const result_in = document.getElementById("result")
let computer;
let computer_pick;
let result;

//Player choice
rock.onclick = play('rock');
paper.onclick = play('paper');
scissor.onclick = play('scissor');

function play(userinput) {    
    computer_pick = Math.floor(Math.random() * 3); 
    console.log(computer_pick);
    if (computer_pick === 0) { 
        computer = 'rock'
    } else if (computer_pick === 1) {
        computer = 'paper';
    } else if (computer_pick === 2) {
        computer = 'scissor';
    } else { console.log('error') };
    console.log(computer); 
    //
    if (computer == userinput) { //tie
        result = 'tie';
    } else if (computer == 'rock' && userinput == 'paper' || computer == 'paper' && userinput == 'scissor' || computer == 'scissor' && userinput == "rock") {
        console.log(win);
        result = 'win';
    } else if (computer == 'rock' && userinput == 'scissor' || computer == 'paper' && userinput == 'scissor' || computer == 'scissor' && userinput == 'paper') {
        console.log(loss);
        result = 'lost';
    }
//output
    document.getElementById('result').innerHTML = You ${result}! The computer threw ${computer}.;
}

Answer 1

您是否正在等待DOM加载？

您在哪里将此文件注入DOM？在head标签或body标签中！

如果将此代码注入到head标记中，则需要等待DOM加载完毕

类似这样：

window.onload = function() {
  // Your script
}

Answer 2

您的代码中有一些错误：

1. [rock.onclick不正确-rock.addEventlistener('click', function(e) {})是正确

2. [console.log(win)（或损失）不正确-您尝试console.log()一个不存在的变量-要在console.log()中输出字符串，应将其放在引号console.log('win')

3. [document.getElementById('result').innerHTML = You ${result}! The computer threw ${computer}.;不正确-您应该使用反引号进行字符串插值

const paper = document.getElementById('paper');
const scissor = document.getElementById('scissor');
const result_in = document.getElementById("result");
let computer;
let computer_pick;
let result;

//Player choice
rock.addEventListener('click', function(e) {
  play('rock')
})
paper.addEventListener('click', function(e) {
  play('paper')
})
scissor.addEventListener('click', function(e) {
  play('scissor')
})

function play(userinput) {
  computer_pick = Math.floor(Math.random() * 3);
  console.log('computer_pick:', computer_pick);
  if (computer_pick === 0) {
    computer = 'rock'
  } else if (computer_pick === 1) {
    computer = 'paper';
  } else if (computer_pick === 2) {
    computer = 'scissor';
  } else {
    console.log('error')
  };
  console.log('computer:', computer);
  //
  if (computer == userinput) { //tie
    result = 'tie';
  } else if (computer == 'rock' && userinput == 'paper' || computer == 'paper' && userinput == 'scissor' || computer == 'scissor' && userinput == "rock") {
    console.log('win');
    result = 'win';
  } else if (computer == 'rock' && userinput == 'scissor' || computer == 'paper' && userinput == 'scissor' || computer == 'scissor' && userinput == 'paper') {
    console.log('lost');
    result = 'lost';
  }
  //output
  document.getElementById('result').innerHTML = `You ${result}! The computer threw ${computer}.`;
}

<div id="rock">ROCK</div><br />
<div id="paper">PAPER</div><br />
<div id="scissor">SCISSORS</div><br />

<div>RESULT: <span id="result"></span></div>