当用户单击按钮时，如何存储可供以后使用的变量？

Question

我正在做一个“石头、剪刀、布”项目。用户单击三个按钮（石头、布或剪刀）之一，然后计算机将进行选择，然后显示获胜者。一旦用户选择了他们想要玩的游戏，我希望能够使用变量“userChoice”，该变量可以在代码中进行选择。

这是我的按钮 HTML：

 <div class="buttons">
    <button id="Rock">Rock</button>
    <button id="Paper">Paper</button>
    <button id="Scissors">Scissors</button>
</div>

这是我的Javascript：

document.addEventListener('DOMContentLoaded', function(event) {
   document.querySelector('#Rock').onclick=function(e){
     const userChoice = "Rock"; 
   }
   document.querySelector('#Paper').onclick=function(e){
     const userChoice = "Paper"; 
   }
   document.querySelector('#Scissors').onclick=function(e){
     const userChoice = "Scissors"; 
   }})

Answer 1

尝试这个方法。现在，当用户单击

Log user choice

按钮时，您会看到他们单击的内容。

    let
        userChoice = ''

    document.querySelector('#Rock').onclick = function() {
        userChoice = "Rock";
    }
    document.querySelector('#Paper').onclick = function() {
        userChoice = "Paper";
    }
    document.querySelector('#Scissors').onclick = function() {
        userChoice = "Scissors";
    }

    let
        user_choice = document.querySelector('#user-choice')

    user_choice.addEventListener('click', function() {
        console.log(userChoice)
    })

<div class="buttons">
    <button id="Rock">Rock</button>
    <button id="Paper">Paper</button>
    <button id="Scissors">Scissors</button>
</div>

<p>
    <button id="user-choice">Log user choice</button>
</p>