从外部txt文件取词存入JS数组后随机插入p标签失败，页面为空求原因

你尝试从外部words.txt文件获取单词列表存入JavaScript数组，再随机选取一个插入段落元素，但页面加载后段落为空，问题出在以下几个关键地方：

你的文件和原代码 #

words.txt内容 #

"word1", "word2", "word3", "word4", "word5", "word6"

原HTML&JavaScript代码 #

<div><p id="word"></p></div>
<script>
         var wordList = fetch("/js/words.txt");
         var words = Array(wordList);
         const randomWord = Math.floor(Math.random()*words.length);
         function word() { document.getElementById("word").innerHTML = randomWord; }
</script>

错误点拆解 #

• fetch是异步操作，直接赋值拿不到实际内容：fetch()返回的是一个Promise对象，不是文件的文本内容，你直接把它赋值给wordList，本质上只是拿到了一个异步任务的容器，不是单词数据。
• 数组转换完全错误：Array(wordList)是把Promise对象包装成了一个只有1个元素的数组，这个数组里根本没有你的单词，所以后续计算的随机索引也毫无意义。
• 随机值使用错误：randomWord是计算出来的索引数字，不是数组里的单词，就算数组正确，你插入的也只是数字而非单词。
• 定义的函数从未执行：你写了word()函数，但没有在任何地方调用它，自然不会更新段落的内容。
• 缺少异步处理和错误捕获：没有处理fetch的响应流程，也没处理请求失败的情况，一旦文件路径错误或者请求出错，根本不知道问题出在哪。

修正后的代码 #

<div><p id="word"></p></div>
<script>
// 发起异步请求并处理响应
fetch("/js/words.txt")
  .then(response => {
    // 检查请求是否成功（状态码200-299）
    if (!response.ok) {
      throw new Error(`请求错误：${response.status}`);
    }
    // 将响应转为文本格式
    return response.text();
  })
  .then(textContent => {
    // 解析文本为单词数组：去除首尾空格，按", "分割，再去掉每个单词的引号
    const wordArray = textContent.trim().split(", ").map(item => item.replace(/"/g, ""));
    // 生成合法的随机索引
    const randomIndex = Math.floor(Math.random() * wordArray.length);
    // 将随机单词插入到段落中
    document.getElementById("word").textContent = wordArray[randomIndex];
  })
  .catch(error => {
    // 请求失败时显示提示并打印错误信息
    document.getElementById("word").textContent = "单词加载失败";
    console.error(error);
  });
</script>

修正说明 #

1. 用fetch的链式.then()处理异步流程，确保拿到真实的文本内容后再进行后续操作
2. 对文本内容进行解析，转换成真正的单词数组
3. 在获取到有效数组后再计算随机索引，确保能拿到正确的单词
4. 直接操作DOM更新内容，不需要额外定义未调用的函数
5. 添加错误处理逻辑，请求失败时给用户提示，同时在控制台打印错误便于调试

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