Javascript 如何记录和更新石头剪刀游戏的赢、输、平历史？

我需要创建一个新函数，该函数将返回每次赢、输和平局结果的数量。通过用户的每个选择（石头、布或剪刀），并单击“开始！”按钮，它将更新所有计数器和日志

HTML显示了一种形式的按钮（每个按钮用于石头布和剪刀选项），以及正在执行的“GO！”按钮

JS只有一个函数

play（）

，执行岩石、布、剪刀阵列的随机排列，这将决定计算机将选择什么。此函数仅声明每场比赛是赢、输还是平，但不记录（感谢用户@BarMar帮助我完成此部分）：

函数播放（）{
变量类型=[‘石头’、‘布’、‘剪刀’]；
var computer_choice=types[Math.floor（Math.random（）*（types.length））；
document.getElementById（“choiceDisplay”）.innerHTML=computer\u choice；
var user_button=document.querySelector（“输入[name=choice]：选中”）；
如果（用户按钮）{
var user\u choice=user\u button.value；
}否则{
警惕（“你必须先选择石头、布或剪刀。”）；
返回；
}
如果（用户选择==计算机选择）{
document.getElementById（“结果”）.textContent=“Tie！”；
返回；
}
开关（计算机选择）{
案例“岩石”：
如果（用户选择==“纸张”）{
document.getElementById（“结果”）.textContent=“您赢了！”；
}否则{
document.getElementById（“结果”）.textContent=“您丢失了。”；
}
打破
案例“文件”：
如果（用户选择==“剪刀”）{
document.getElementById（“结果”）.textContent=“您赢了！”；
}否则{
document.getElementById（“结果”）.textContent=“您丢失了。”；
}
打破
案例“剪刀”：
如果（用户选择==“摇滚乐”）{
document.getElementById（“结果”）.textContent=“您赢了！”；
}否则{
document.getElementById（“结果”）.textContent=“您丢失了。”；
}
}
}

选择一个：

摇滚乐


纸张


剪刀

计算机选择了：

走！

我猜这是一个家庭作业问题，因为我已经看过两次了，哈哈；无论如何，一种方法是为结果添加显示并更新它们

展示

   <h4>Wins <span id="wins">0</span></h4>
   <h4>Losses <span id="losses">0</span></h4>
   <h4>Ties <span id="ties">0</span></h4>

范例

---

在函数之外，我声明了一个名为“record”的全局空数组

每次用户输、赢或打成平局时，我都使用“推”方法将结果添加到数组中，如下所示：

record.push("Tie");

在HTML文件的末尾，我添加了一个带有记录ID的空div，以便于检索

<div id="records"></div>

在上面的代码片段中，您将注意到这段代码，它计算了获奖者的获奖次数：

record.filter(x => x=="Win").length

var记录=[]；
函数播放（）{
变量类型=[‘石头’、‘布’、‘剪刀’]；
var computer_choice=types[Math.floor（Math.random（）*（types.length））；
document.getElementById（“choiceDisplay”）.innerHTML=computer\u choice；
var user_button=document.querySelector（“输入[name=choice]：选中”）；
如果（用户按钮）{
var user\u choice=user\u button.value；
}否则{
警惕（“你必须先选择石头、布或剪刀。”）；
返回；
}
如果（用户选择==计算机选择）{
document.getElementById（“结果”）.textContent=“Tie！”；
记录。推（“平”）；
}否则{
开关（计算机选择）{
案例“岩石”：
如果（用户选择==“纸张”）{
document.getElementById（“结果”）.textContent=“您赢了！”；
记录。推（“赢”）；
}否则{
document.getElementById（“结果”）.textContent=“您丢失了。”；
记录。推（“输”）；
}
打破
案例“文件”：
如果（用户选择==“剪刀”）{
document.getElementById（“结果”）.textContent=“您赢了！”；
记录。推（“赢”）；
}否则{
document.getElementById（“结果”）.textContent=“您丢失了。”；
记录。推（“输”）；
}
打破
案例“剪刀”：
如果（用户选择==“摇滚乐”）{
document.getElementById（“结果”）.textContent=“您赢了！”；
记录。推（“赢”）；
}否则{
document.getElementById（“结果”）.textContent=“您丢失了。”；
记录。推（“输”）；
}
}
}
document.getElementById（“records”）.innerHTML=“你输了”+record.filter（x=>x==“Lose”）.length+“次。
你赢了”+record.filter（x=>x==“Win”）.length+“次。
这是一个平局”+record.filter（x=>x==“平局”）.length+“次。
”；
}

选择一个：

摇滚乐


纸张


剪刀

计算机选择了：

走！

您尝试过如何录制它？

<div id="records"></div>

document.getElementById("records").innerHTML = "<p>You lost " + record.filter(x => x=="Lose").length + " times.</p><p>You won " + record.filter(x => x=="Win").length + " times.</p><p>It's been a tie " + record.filter(x => x=="Tie").length + " times.</p>";

record.filter(x => x=="Win").length