您如何根据无线电输入的输入总结一个变量？

Question

我正在编写一个小测验，向您展示四种可能的产品中哪一种最适合您。

通过无线电输入询问不同的问题，每个问题都有适当的值

<input class="answer__input" type="radio" id="question1" value="product1" />
<input class="answer__input" type="radio" id="question1" value="product2" />
<input class="answer__input" type="radio" id="question1" value="product3" />
<input class="answer__input" type="radio" id="question1" value="product4" />

在 JavaScript 中我有 4 个变量：

var product1 = 0  
var product2 = 0  
var product3 = 0  
var product4 = 0 

现在我希望每次选择一个答案时，相应的变量都会增加 1

在 10 个问题之后，它可能看起来像这样：

var product1= 2
var product2 = 4
var product3 = 3
var product4 = 1

在测验结束时，我想输出最大的变量。

如何在 JavaScript 中做到这一点？我将非常感谢您的帮助:)

Answer 1

您不能使用相同的id 4 次，并且必须将name 添加到无线电输入中。我已经重建了你的 html：

1 product<input class="answer__input question1" name="question1" type="radio" id="product1" value="product1" /><br>
2 product<input class="answer__input question1" name="question1" type="radio" id="product2" value="product2" /><br>
3 product<input class="answer__input question1" name="question1" type="radio" id="product3" value="product3" /><br>
4 product<input class="answer__input question1" name="question1" type="radio" id="product4" value="product4" /><br>

现在我还在所有产品上使用for 循环为change 事件添加了一个事件侦听器。在函数中，我检查了用户单击了哪个选项并增加了相应的值。

var product1 = 0;
var product2 = 0;
var product3 = 0;
var product4 = 0;

for (i = 1; i <= 4; i++) {
   document.getElementById(`product${i}`).addEventListener('change', e => {
      if (e.target.value === 'product1') product1++;
      else if (e.target.value === 'product2') product2++;
      else if (e.target.value === 'product3') product3++;
      else if (e.target.value === 'product4') product4++;

      console.log(product1, product2, product3, product4);
   });
}