如何实现点击HTML页面按钮随机读取TXT文件内容并展示

整体逻辑很简单：通过浏览器内置的Fetch API读取同目录下的TXT文件，把内容按换行拆分出所有条目，随机抽取一条插入到你指定的页面位置即可。

1. 提前准备TXT文件 #

• 把你整理好的所有要展示的内容，每条单独占一行，存为love_contents.txt，和你写的HTML文件放在同一个文件夹中
• 保存文件时编码选择UTF-8，避免中文出现乱码

2. 确认HTML结构 #

你可以参考下面的示例调整自己的页面结构，给展示区域和按钮加上对应的ID方便JS识别：

<h1>I Love</h1>
<!-- 你要展示随机内容的指定区域 -->
<div id="content-area" style="margin: 24px 0; font-size: 22px; color: #e75480;"></div>
<button id="gen-btn">点击查看</button>

3. 加入功能实现代码 #

把下面这段JS代码放到HTML文件</body>标签之前即可：

// 给按钮绑定点击事件
document.querySelector('#gen-btn').addEventListener('click', async () => {
  try {
    // 读取同目录下的TXT文件
    const res = await fetch('./love_contents.txt')
    if (!res.ok) throw new Error('读取文件失败')
    // 把文件内容转为纯文本
    const allText = await res.text()
    // 按换行符拆分所有条目，同时过滤掉不小心留的空行
    const contentList = allText.split('\n').filter(item => item.trim())
    // 随机取一个条目的索引
    const randomIdx = Math.floor(Math.random() * contentList.length)
    const pickedContent = contentList[randomIdx].trim()

    // 把抽到的内容追加到展示区域，如果要替换旧内容就把下面三行换成 document.querySelector('#content-area').textContent = pickedContent
    const newItem = document.createElement('p')
    newItem.textContent = pickedContent
    document.querySelector('#content-area').appendChild(newItem)
  } catch (err) {
    // 读取出错时也显示告白内容，不影响体验
    const newItem = document.createElement('p')
    newItem.textContent = '今天也超级喜欢你呀'
    document.querySelector('#content-area').appendChild(newItem)
    console.error(err)
  }
})

4. 本地测试注意事项 #

• 不要直接双击HTML文件在浏览器打开，浏览器的跨域限制会禁止读取本地TXT文件，功能会报错
• 如果你用VS Code写代码，安装Live Server插件后右键HTML文件选择「Open with Live Server」启动本地静态服务就能正常测试
• 后续要上线的话，把HTML和TXT文件一起上传到服务器对应目录就能正常使用

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