使用.innerHTML随机修改div内容时变量拼接异常求助

嘿，我懂你遇到的问题了——你本来想让随机数对应到不同的文本变量，结果拼接后直接输出了text1这种字符串，而不是变量里的实际内容对吧？这其实是把字符串拼接和变量访问搞混啦，我给你两种解决办法，优先推荐第一种哦～

举个例子，假设你定义了const text1 = "早安"、const text2 = "午安"，然后写了"text" + randomNum，这行代码只会生成一个字符串"text1"，而不是去读取text1变量里的"早安"。浏览器根本不知道你想访问变量，它只把"text"和数字当成普通字符串拼起来了。

把所有要随机展示的文本塞进数组里，用随机数当索引直接取内容，这是前端里最规范的做法，完全不会有拼接变量名的坑：

// 第一步：把所有文本存到数组里，想加多少加多少
const randomTexts = [
  "今天天气真好～",
  "随机文本第二弹",
  "这是第三个随机内容"
];

// 第二步：生成对应数组长度的随机索引（数组索引从0开始哦）
const randomIndex = Math.floor(Math.random() * randomTexts.length);

// 第三步：给div赋值
document.getElementById("yourDivId").innerHTML = randomTexts[randomIndex];

如果因为某些原因必须保留单独的text1、text2变量，可以通过window[变量名字符串]来访问（浏览器里全局变量会挂在window对象上），但这种写法不够安全，也不利于后续维护，谨慎使用：

// 定义单独的文本变量
const text1 = "第一个文本";
const text2 = "第二个文本";
const text3 = "第三个文本";

// 生成1-3的随机数
const randomNum = Math.floor(Math.random() * 3) + 1;

// 用字符串拼接变量名，通过window访问对应变量
const targetText = window[`text${randomNum}`];

// 给div赋值
document.getElementById("yourDivId").innerHTML = targetText;

注意：如果这些文本变量是在函数内部定义的局部变量，window就访问不到了，所以还是优先用数组方案更稳妥。

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