使用JavaScript统计调查中选择的答案类型数

我需要跟踪/统计用户为在线调查选择的答案

调查共有18个问题，每个问题有两个答案（可以是4种颜色中的1种）

基于我的javascript初学者水平，我想实现这一点的方法基本上是在

中生成问题，并在

标记中包含两个答案

我将创建一个事件侦听器，将一个类（比如

.selected

）添加到所选的答案中（但也将其从同级元素中删除，以确保只选择一个），然后当用户点击提交时，我将统计结果（使用类似

.map（）

）通过在一个数组中计数选定的颜色，每个颜色有一个键值对。具有最高计数的键将是结果

我试着为这个看似简单的问题寻找一个代码笔，但我没有找到任何足够具体的东西。有人有什么建议吗

我发现了一个使用1-5分制答案的调查示例。答案只有两个，每个答案都对应于特定的颜色。HTML是相对基本的：

我经常自发地或在最后一刻做出决定

同意
不同意


我的想法通常是非传统的或激进的

同意
不同意


我自然倾向于站出来领导团队

同意
不同意


我根据逻辑做出决定，很少受情绪影响

同意
不同意

但是JS是我真正遇到麻烦的地方。我当前有此代码，它激活已选择的按钮，并相应地停用div中的另一个按钮，但它仅为第一个问题保存…：

document.querySelector（'.value btn'）.onmousedown=函数showSelection（）{
const classList=$（this.attr（'class'）；
const classArr=classList.split（“”）；
const this_group=classArr[0]；
//如果按钮已选定，单击时取消选择
//否则，取消选择组中的任何选定按钮并选择刚刚单击的按钮
if（$（this）.hasClass（'active'））{
$（this.removeClass（'active'）；
}否则{
$（'..+此组）.removeClass（'active'）；
$（this.addClass（'active'）；
}
};

接下来，最后，我需要弄清楚如何计算所选答案。我可以使用

数据属性

手动为每个同意和不同意按钮添加颜色，但如何计算所选按钮的数量

下面是我现在在一个代码笔中的内容：

---

我也愿意完全放弃我目前的方法，用一种更干净、更简单的方法来解决这个问题。

听起来你的思路是对的，但StackOverflow在向我们展示你试图编写的实际代码时效果最好，这样我们就可以给你反馈你所写的内容。请向我们展示您迄今为止编写的代码，即使它不完整或不起作用。是的，您完全正确。我刚刚花了最后一个小时调整代码并将其添加到代码笔中。我已将其添加到我的问题中。请添加一段代码。包括一个指向外部站点（如Codepen）的链接也可以，但它不应该是您代码的唯一位置，因为外部站点可能会随着时间的推移而改变或消失，使您的问题难以理解。我做了一些额外的更改，并创建了最小的、可复制的代码。这样更好吗？我不会让每个问题的答案由两个按钮组成，而是使用一个广播组。不仅可以使用CSS将它们设置为按钮样式，而且它们是单选组这一事实意味着浏览器只允许选择其中一个按钮，而不需要添加JS单击处理程序。至于统计选择的颜色，我喜欢你使用数据属性的想法。您可能可以像这样轻松地对它们进行计数，例如，

var numRed=document.queryselectoral（'input[data color=“red”]）。length

（其中红色按钮为

）。