如何讓我的搖滾，紙張，剪刀游戲刷新按鈕點擊？

Question

這不是重復的，因為window.load（）會在3秒后刷新，而不會讓用戶完全看到結果

我想要做的是當用戶點擊另一個按鈕進行新選擇時自動重置游戲，而無需刷新頁面以單擊“重置”按鈕。

這會涉及在再次運行腳本之前清除innerHTML並重置變量嗎？

我的代碼在這里： http ： //jsbin.com/yuvalucupo/edit？html，css，js

 //var rock = document.getElementById("rock"); //var paper = document.getElementById("paper"); //var scissors = document.getElementById("scissors"); var screen = document.getElementById("screen"); var compAnswer = Math.random(); //Set computer value if (compAnswer >= 0 && compAnswer <= 0.33) { compAnswer = "rock"; } else if (compAnswer >= 0.34 && compAnswer <= 0.66) { compAnswer = "paper"; } else { compAnswer = "scissors"; } function result(choice1, choice2) { if (choice1 === choice2) { screen.innerHTML = "<p>It's a tie!</p>"; } //Rock Start else if (choice1 === "rock" && choice2 === "scissors") { screen.innerHTML = "<p>Rock Wins!</p>"; } else if (choice1 === "rock" && choice2 === "paper") { screen.innerHTML = "<p>Paper Wins!</p>"; } //End Rock //Paper Start else if (choice1 === "paper" && choice2 === "scissors") { screen.innerHTML = "<p>Scissors Wins!</p>"; } else if (choice1 === "paper" && choice2 === "rock") { screen.innerHTML = "<p>Paper Wins</p>!"; } //Paper End //Scissors Start else if (choice1 === "scissors" && choice2 === "paper") { screen.innerHTML = "<p>Scissors Wins</p>"; } else if (choice1 === "scissors" && choice2 === "rock") { screen.innerHTML = "<p>Rock Wins</p>"; } //Scissors End } //Display Computer's Answer function displayCompAnswer() { var computer = document.getElementById("computerAnswer"); computer.innerHTML = compAnswer; } 

 #screen, #computerAnswer { height: 100px; width: 250px; background-color: lightgrey; border: 1px solid black; } 

 <div id="screen"></div> <button id="rock" onclick="userAnswer = 'rock'; result(userAnswer, compAnswer); displayCompAnswer();">Rock</button> <button id="paper" onclick="userAnswer = 'paper'; result(userAnswer, compAnswer); displayCompAnswer();">Paper</button> <button id="scissors" onclick="userAnswer = 'scissors'; result(userAnswer, compAnswer); displayCompAnswer();">Scissors</button> <div id="computerAnswer"></div> 

Answer 1

你可能會做這樣的事情來“重置”你的游戲：

function clearMessage(event) {
    event.preventDefault();  // Stops the page from refreshing
    var screen = document.getElementById("screen");
    screen.innerHTML = '';
}

然后你可以有這樣的重置按鈕

<button onclick="clearMessage(event)">Reset</button>

當我查看你的代碼時，還有一些其他的想法。 看看每個函數如何只做一件事？

// input: 0 = rock, 1 = paper and 2 = scissors
function makeUserSelection(choice) {
    var computerChoice = getCompAnswer();
    var result = getResult(choice, computerChoice);
    displayResult(result);
}

// output: 0 = rock, 1 = paper and 2 = scissors
function getCompAnswer() {
    var rand = Math.random();
    if (compAnswer <= 0.33) {
        return 0;
    }

    return (compAnswer <= 0.66) ? 1 : 2;
}

// input: 0 = rock, 1 = paper and 2 = scissors
// output: 0 = draw, 1 = user wins and -1 = user loses.
function getResult(userValue, computerValue) {
    if(userValue === computerValue) {
        return 0; // draw
    }
    return ((userValue + 1) % 3 === computerValue) ? return -1 : 1;
}

displayMessage(message) {
    var screen = document.getElementById('screen');
    screen.innerHTML = '<p>' + message + '</p>';
}

function displayResult(result) {
    messages = ["It's a draw", "You lose", "You win"];
    displayMessage(messages[result]);
}

這是我如何更新按鈕：

<div id="screen"></div>
<button id="rock" onclick="makeUserSelection(0);">Rock</button>
<button id="paper" onclick="makeUserSelection(1);">Paper</button>
<button id="scissors" onclick="makeUserSelection(2);">Scissors</button>
<button id="reset" onclick="clearMessage(event);">Reset</button>
<div id="computerAnswer"></div>