如何用JavaScript实现随机选择穿搭类型的穿搭生成器？

我正在用JavaScript开发一个简易的穿搭生成器，用于生成不同的服装搭配组合。

目前我设置了两个按钮分别对应两种穿搭类型：

• A型：毛衣、长袖衬衫和裤子
• B型：外搭衬衫、长袖衬衫和裤子

我希望将其改为单个按钮，点击后随机选择一种穿搭类型（#falloutfita或#falloutfitb），再基于该类型生成随机穿搭。我原本想在textContent中使用“或”操作符||，但似乎无法实现。

以下是我的JavaScript代码：

var allsweaters = ["blue hoodie", "black hoodie", "pink v-neck sweater", "gray pullover"];
var allpants = ["black casual pants", "dark old navy jeans", "medium old navy jeans", "black jumpsuit"];
var alllongshirts = ["long-sleeved white shirt", "long-sleeved gray shirt", "long-sleeved black shirt"];
var allovershirts = ["white button-up", "green jacket", "blue jean shirt"];

document.querySelector("#submitfalla").addEventListener("click", () => {
  var sweater = "";
  var pants = "";
  var lsshirt = "";
  var random_index = 0;
  for(let i = 0; i < 1;i++){
    random_index = Math.floor(Math.random() * (allsweaters.length - 1));
      sweater += allsweaters[random_index];
    random_index = Math.floor(Math.random() * (allpants.length - 1));
      pants += allpants[random_index];
    random_index = Math.floor(Math.random() * (allpants.length - 1));
      lsshirt += alllongshirts[random_index];
  }

  document.querySelector("#falloutfita").textContent = sweater + " and " + lsshirt + " and " + pants;
});
  document.querySelector("#submitfallb").addEventListener("click", () => {
    var overshirt = "";
    var pants = "";
    var lsshirt = "";
    var random_index = 0;
    for(let i = 0; i < 1;i++){
      random_index = Math.floor(Math.random() * (allovershirts.length - 1));
        overshirt += allovershirts[random_index];
      random_index = Math.floor(Math.random() * (allpants.length - 1));
        pants += allpants[random_index];
      random_index = Math.floor(Math.random() * (allpants.length - 1));
        lsshirt += alllongshirts[random_index];
    }


  document.querySelector("#falloutfitb").textContent = overshirt + " and " + lsshirt + " and " + pants;

});

这是我第一次在Stack Overflow发帖，若有需要调整的地方请告知！我已经查看过类似问题，但无法成功应用到我的场景中。

按以下步骤修改代码，即可实现单个按钮随机生成两种穿搭类型的效果：

1. 合并事件监听：移除原有的两个按钮监听，改为给单个按钮（比如设为#submitfall）绑定点击事件。
2. 随机选择穿搭类型：用Math.random()实现50%概率选择A型或B型穿搭。
3. 复用逻辑：把随机获取服装的逻辑抽成工具函数，减少重复代码。

修改后的完整代码：

var allsweaters = ["blue hoodie", "black hoodie", "pink v-neck sweater", "gray pullover"];
var allpants = ["black casual pants", "dark old navy jeans", "medium old navy jeans", "black jumpsuit"];
var alllongshirts = ["long-sleeved white shirt", "long-sleeved gray shirt", "long-sleeved black shirt"];
var allovershirts = ["white button-up", "green jacket", "blue jean shirt"];

// 工具函数：随机获取数组中的一个元素
function getRandomItem(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

// 单个按钮的点击事件处理
document.querySelector("#submitfall").addEventListener("click", () => {
  // 随机决定生成A型还是B型穿搭
  const isTypeA = Math.random() > 0.5;
  
  // 通用的服装元素
  const pants = getRandomItem(allpants);
  const lsshirt = getRandomItem(alllongshirts);
  
  let outfitText = "";
  let targetElement = "";

  if (isTypeA) {
    const sweater = getRandomItem(allsweaters);
    outfitText = `${sweater} and ${lsshirt} and ${pants}`;
    targetElement = "#falloutfita";
  } else {
    const overshirt = getRandomItem(allovershirts);
    outfitText = `${overshirt} and ${lsshirt} and ${pants}`;
    targetElement = "#falloutfitb";
  }

  // 可选：清空另一个穿搭区域的内容，每次只显示一种穿搭
  const otherElement = isTypeA ? "#falloutfitb" : "#falloutfita";
  document.querySelector(otherElement).textContent = "";
  
  // 设置当前选中类型的穿搭内容
  document.querySelector(targetElement).textContent = outfitText;
});

重要细节说明 #

• 修复了原代码的小问题：原代码中Math.random() * (arr.length - 1)会导致永远取不到数组最后一个元素，改为直接用arr.length即可覆盖所有元素。
• 工具函数getRandomItem：简化了重复的随机逻辑，让代码更易读和维护。
• 随机类型切换：Math.random() > 0.5实现了两种类型的等概率随机选择，若想调整概率，比如70%选A型，改成Math.random() > 0.3即可。

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