如何用JavaScript向innerHTML传递多值？展示showprimes值到div返回undefined

Hey there! Let's tackle your two JavaScript questions one by one, shall we?

传递多个值到innerHTML有几种实用的方式，你可以根据场景灵活选择：

• 模板字面量（首推）：ES6引入的语法，用反引号`包裹内容，变量直接通过${}插入，支持换行和复杂结构，可读性拉满：

  const username = "Charlie";
  const level = 15;
  const achievement = "Gold Medal";
  document.getElementById("profileDiv").innerHTML = `
    <h3>玩家信息</h3>
    <p>用户名：${username}</p>
    <p>等级：${level}</p>
    <p>成就：${achievement}</p>
  `;
  

• 字符串拼接：如果需要兼容老旧环境，可以用+号拼接字符串与变量：

  const product = "Laptop";
  const price = 8999;
  const stock = 20;
  document.getElementById("productDiv").innerHTML = 
    "<h4>" + product + "</h4>" +
    "<p>价格：¥" + price + "</p>" +
    "<p>库存：" + stock + "台</p>";
  

• 数组join方法：适合批量生成HTML片段的场景，先把片段存入数组，再用join('')合并成完整字符串：

  const hobbies = ["读书", "跑步", "摄影"];
  const hobbyItems = hobbies.map(item => `<li>${item}</li>`);
  document.getElementById("hobbyList").innerHTML = "<ul>" + hobbyItems.join('') + "</ul>";
  

出现undefined基本是两个原因：要么你的showPrimes函数没有返回有效的质数列表，要么赋值时没有正确调用函数获取结果。我先举个常见错误案例，再给修复方案：

错误示例（会返回undefined）： #

function showPrimes(max) {
  for (let i = 2; i <= max; i++) {
    let isPrime = true;
    for (let j = 2; j < i; j++) {
      if (i % j === 0) {
        isPrime = false;
        break;
      }
    }
    if (isPrime) {
      // 只打印质数，没有收集并返回结果
      console.log(i);
    }
  }
  // 函数没有return语句，默认返回undefined
}

// 这里拿到的是函数的默认返回值undefined
document.getElementById("primeDiv").innerHTML = showPrimes(20);

修复方案： #

我们需要在函数内收集质数，然后返回可直接展示的字符串：

function showPrimes(max) {
  const primeList = [];
  for (let i = 2; i <= max; i++) {
    let isPrime = true;
    for (let j = 2; j <= Math.sqrt(i); j++) { // 优化质数判断效率
      if (i % j === 0) {
        isPrime = false;
        break;
      }
    }
    if (isPrime) {
      primeList.push(i);
    }
  }
  // 返回拼接好的质数字符串，也可以返回数组后在外部处理
  return primeList.join("，");
}

// 现在赋值的是正确的质数列表
document.getElementById("primeDiv").innerHTML = `小于等于20的质数：${showPrimes(20)}`;

另外还要注意：如果你的代码是innerHTML = showPrimes（没加括号调用），那也会得到undefined，一定要写成showPrimes(你的最大值参数)来获取返回值。

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