使用 Vanilla JavaScript 的石头剪刀布答案

【问题标题】：Rock Paper Scissors using Vanilla JavaScript使用 Vanilla JavaScript 的石头剪刀布
【发布时间】：2020-03-15 23:39:28
【问题描述】：

每当我点击岩石时 - 我希望它返回计算机选择的内容和回合的结果。我仍在学习 DOM 操作 - 所以我所做的是为#rock（摇滚元素的 ID）设置了一个事件侦听器。对应代码：

document.getElementById('rock').addEventListener('click', function(){
    let a, b;
    a = document.getElementById('text');
    b = document.getElementById('rock').value = 'rock';
    for (let i = 1; i <= 5; i++){
        (b == 'rock' && compChoice == 'Scissors') ? b.textContent = 'You win! The computer picked: ' + compChoice : (b == 'rock' && compChoice == 'Paper') ? y.textContent = 'You lose! The computer picked: ' + compChoice : 'It\'s a tie! The computer picked Rock! ';
    }
});

变量 compChoice 设置为一个数组 - 以 'rock'、'paper' 和 'scissors' 作为其元素 - 我使用 Math.floor 和 Math.random 从 compChoice 数组生成随机值. 所以当我点击拳头时 - 我会让事件工作一次，但是在点击拳头后我似乎无法得到与你在图像中看到的不同的结果 - 基本上事件不会产生不同的结果——只有当我去刷新页面时，它才会产生不同的结果。所以我的问题是：如何多次单击一个按钮并根据上面的代码让它每次产生不同的结果？（p.s. 我对我刚接触编程的文章表示歉意：/）

【问题讨论】：

事件侦听器中的循环看起来并没有做任何有意义的事情，尽管据我所知，这与问题并没有真正的关系。它只会在点击时设置文本内容五次。你能分享你选择compChoice的代码吗？听起来您只是设置了一次，而不是更新值。
let compChoices = ['Rock', 'Paper', 'Scissors']; let compChoice = compChoices[Math.floor(Math.random()*compChoices.length)];
compChoices 设置为数组。我创建了一个名为 results() 的单独函数 - 用于玩家选择的内容和 compChoice 将产生的随机选择之间的不同结果。
function outcomes(){ let b; if (a == 'rock' && compChoice == 'Paper'){ b = document.getElementById('text').innerHTML = 'Computer picked: ' + compChoice + ' You lose!'; } else if (a == 'rock' && compChoice == 'Scissors') { b = document.getElementById('text').innerHTML = 'Computer picked: ' + compChoice + ' You win! '; } else if (a == 'rock' && compChoice == 'Rock') { b = document.getElementById('text').innerHTML = 'Computer picked: ' + compChoice + ' It\'s a tie!';
此注释上方是 outcomes() 函数的一小部分 - compChoice 被选中并存储在变量 b 中，它显示在记分牌最低 div 的文本中。

标签： javascript dom-manipulation

【解决方案1】：

我发现了我的问题——基本上我将compChoices[Math.floor(Math.random()*compChoices.length)]; 存储在一个变量中——这会导致它的值不会改变，除非我刷新网页。因此，我在函数中返回了表达式，它解决了我的问题。

【讨论】：