如何编写函数拼接两个switch循环的输出结果？

嘿，作为编程新手能写出两个独立的switch逻辑已经很棒啦！你的result()函数没成功主要有两个核心问题：一是你直接拿了下拉框的value值拼接，但我们要的是switch生成的文本内容；二是这个函数没有被触发的时机，用户选完选项后它根本没跑起来😉

我给你调整一下代码，核心思路是先把两个switch生成的文本存起来，再统一拼接展示，同时确保每次用户选完选项都会自动更新拼接结果：

// 先获取所有需要的DOM元素
const selectWeather = document.getElementById('weather'); 
const paraWeather = document.getElementById('alf'); 
const selectDance = document.getElementById('dance'); 
const paraDance = document.getElementById('tim'); 
// 新增一个元素用来显示拼接结果（如果页面上没有，记得在HTML里加个<div id="combinedResult"></div>）
const combinedResult = document.getElementById('combinedResult');

// 定义两个变量存储两个switch生成的文本
let weatherText = '';
let danceText = '';

// 修改setWeather函数，把文本存到变量里
function setWeather() { 
  const choice = this.value; 
  switch(choice) { 
    case 'sunny': 
      weatherText = "fly me to the Moon"; 
      break; 
    case 'rainy': 
      weatherText = "let me sail amongst the stars"; 
      break; 
    case 'snowy': 
      weatherText = "life on Jupiter and Mars"; 
      break; 
    default: 
      weatherText = ""; 
  }
  // 更新单个文本展示
  paraWeather.textContent = weatherText;
  // 每次更新后调用拼接函数
  updateCombinedResult();
} 

// 同理修改setDance函数
function setDance() { 
  const art = this.value; 
  switch(art) { 
    case 'hail': 
      danceText = "in other words"; 
      break; 
    case 'rail': 
      danceText = "darling kiss me"; 
      break; 
    case 'cat': 
      danceText = "please be true"; 
      break; 
    default: 
      danceText = ""; 
  }
  paraDance.textContent = danceText;
  // 每次更新后调用拼接函数
  updateCombinedResult();
} 

// 拼接函数，现在用存储的文本内容来拼接
function updateCombinedResult() { 
  // 可以根据需求调整拼接格式，比如加空格、分隔符
  const fullText = `${weatherText} ${danceText}`.trim();
  // 把结果展示到指定元素里
  combinedResult.textContent = fullText;
  // 如果想替换原来的para内容也可以：paraWeather.textContent = fullText;
}

// 绑定事件监听
selectWeather.addEventListener('change', setWeather); 
selectDance.addEventListener('change', setDance);

关键调整点： #

• 新增了weatherText和danceText变量专门存储两个switch生成的文本，避免直接依赖DOM元素的内容；
• 把原来的result()改名为updateCombinedResult()，并在两个switch函数执行完后自动调用，确保每次选完选项都会更新拼接结果；
• 拼接的是实际生成的文本内容，而不是下拉框的value值，这才是你想要的效果；
• 新增了专门展示拼接结果的元素，避免覆盖原来的单个文本展示（如果不需要保留单个展示，可以直接替换成拼接内容）。

如果你的页面上还没有用来展示拼接结果的元素，记得在HTML里加一行：

<div id="combinedResult"></div>

这样就能完美实现你想要的拼接效果啦！

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