如何从数组中随机选取内容设置到<p>元素，实现诗歌生成器

步骤1：准备HTML结构 #

<!-- 诗歌展示区域 -->
<p id="poem-output"></p>
<!-- 可选：添加生成按钮，点击即可刷新诗歌内容 -->
<button id="generate-btn">生成新诗歌</button>

步骤2：编写核心逻辑代码 #

// 1. 自定义短语库，可按需替换为适合给奶奶的祝福、日常回忆类内容
const phraseGroups = {
  opening: ["冬日的窗沿落着碎雪", "老藤椅边晒着暖融融的太阳", "橱柜上的糖罐飘着蜜香", "院角的腊梅开得正旺"],
  middle: ["我牵着您的手走过长巷", "您织的围巾裹着整年的暖", "菜碗里永远卧着我爱吃的蛋", "旧相册里藏着您笑弯的眼"],
  closing: ["愿您来年无病痛，岁岁都安康", "所有的心愿都能得偿", "冬日暖，岁月长，您永远是我最爱的模样", "圣诞节的糖果，永远都为您留上半罐"]
}

// 2. 从数组随机选取元素的工具函数
function getRandomItem(arr) {
  const randomIndex = Math.floor(Math.random() * arr.length)
  return arr[randomIndex]
}

// 3. 生成诗歌并赋值给p元素的功能函数
function generatePoem() {
  // 按需求从不同分组选取短语，可调整选取数量、拼接规则
  const line1 = getRandomItem(phraseGroups.opening)
  const line2 = getRandomItem(phraseGroups.middle)
  const line3 = getRandomItem(phraseGroups.closing)
  // 拼接内容，<br>用于实现换行效果
  const fullPoem = `${line1}<br>${line2}<br>${line3}`
  // 把生成的内容写入p元素
  document.getElementById("poem-output").innerHTML = fullPoem
}

// 4. 页面加载完成后自动生成第一版诗歌
window.onload = generatePoem

// 5. 绑定按钮点击事件，点击即可重新生成诗歌
document.getElementById("generate-btn").addEventListener("click", generatePoem)

可调整说明 #

• 如果不需要分组，直接把所有短语放在同一个数组里，修改generatePoem的选取逻辑即可
• 需要生成更多行诗歌时，加循环调用getRandomItem拼接内容即可
• 不需要生成按钮的话，删除对应HTML和绑定事件的JS代码即可，每次刷新页面就会自动更换诗歌内容

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