新手求助：实现判断数组中0/1数量占比的函数及代码解释

首先咱们先拆解你现有的这段代码，然后再帮你实现那个根据答案数量显示不同结果的功能～

一、现有代码的解释与问题修复 #

先把你的代码贴出来：

questionOneInputYes.addEventListener("click", function() { 
  if (questionTwo.style.display="none") { 
    questionTwo.style.display="block"; 
    answerData.push(0); 
  } 
})
questionOneInputNo.addEventListener("click", function() { 
  if (questionTwo.style.display="none") { 
    questionTwo.style.display="block"; 
    answerData.push(1); 
  } 
})

代码功能拆解： #

• 你给两个按钮（questionOneInputYes和questionOneInputNo）绑定了点击事件：
  • 点击“是”按钮时，把代表“是”的0推入answerData数组，同时显示第二个问题（questionTwo）
  • 点击“否”按钮时，把代表“否”的1推入数组，同样显示第二个问题

代码里的小bug： #

注意这里的if (questionTwo.style.display="none")，你用的是赋值运算符=，而不是比较运算符===！这会导致不管questionTwo当前是什么状态，这个条件都会先把它的display设为none，然后因为赋值表达式返回的是赋值结果（也就是"none"），会被判定为true，进而执行后面的代码。

修复后的条件应该是：

if (questionTwo.style.display === "none")

如果你不确定初始的display样式有没有被行内设置，也可以用getComputedStyle来获取页面实际生效的样式：

if (window.getComputedStyle(questionTwo).display === "none")

二、实现答案数量判断的功能 #

接下来咱们写一个函数，用来统计数组里0和1的数量，然后根据结果显示不同内容。步骤如下：

1. 统计数量并判断的函数 #

function checkAnswers() {
  // 统计“是”的次数（数组中0的数量）
  const yesCount = answerData.filter(item => item === 0).length;
  // 统计“否”的次数（数组中1的数量）
  const noCount = answerData.filter(item => item === 1).length;

  // 根据数量判断结果并显示
  if (noCount > yesCount) {
    // 当“否”的数量多于“是”时的逻辑，比如提示用户
    alert("否的数量更多！");
    // 也可以操作DOM显示内容，比如：
    // document.getElementById("result").textContent = "否的数量更多！";
  } else if (noCount === yesCount) {
    // 两者数量相等时的逻辑
    alert("是和否的数量一样多！");
    // document.getElementById("result").textContent = "是和否的数量一样多！";
  } else {
    // 这里是“是”的数量更多的情况，按需添加逻辑即可
    alert("是的数量更多！");
  }
}

2. 什么时候调用这个函数？ #

你可以在用户回答完所有问题后调用它，比如在最后一个问题的按钮点击事件里添加调用，或者专门加一个“提交答案”的按钮，绑定点击事件来执行：

// 假设你有一个id为submitBtn的提交按钮
document.getElementById("submitBtn").addEventListener("click", checkAnswers);

代码解释： #

• answerData.filter(item => item === 0).length：filter方法会筛选出数组中所有等于0的元素，返回一个新数组，.length就是这个新数组的长度，也就是“是”的回答次数。
• 通过if...else if...else分支判断三种情况：否更多、数量相等、是更多，分别执行对应的显示逻辑。

内容的提问来源于stack exchange，提问作者The Nuthouse