使用JavaScript和Node.js开发占星网站：随机内容更新显示故障排查

核心问题分析 #

1. Node.js模块无法在浏览器运行：你用了Node.js的fs模块读取JSON，但浏览器不支持这个模块，直接运行会抛出错误，导致三个display函数无法正常返回内容。
2. 更新函数未触发：updateResults函数仅被定义，没有在页面加载或刷新时调用。
3. DOM加载时机错误：脚本放在body最上方，此时页面元素还未渲染完成，getElementById会获取到null，无法修改元素文本。

分步解决方案 #

1. 替换fs模块，改用浏览器兼容的JSON读取方式 #

修改modules/display.js，用fetch API替代fs，适配浏览器环境：

// 改用fetch API读取JSON文件，适配浏览器环境
export const displayQuote = async () => {
  const response = await fetch('./data/quotes.json');
  const quotes = await response.json();
  const randomIndexQuote = Math.floor(Math.random() * quotes.length);
  const { quote, author } = quotes[randomIndexQuote];
  return `"${quote}", ${author}`;
};

export const displayPrediction = async () => {
  const response = await fetch('./data/predictions.json');
  const predictions = await response.json();
  const randomIndex = Math.floor(Math.random() * predictions.quotes.length);
  return predictions.quotes[randomIndex];
};

export const displayFunFact = async () => {
  const response = await fetch('./data/funfacts.json');
  const funfacts = await response.json();
  const randomIndex = Math.floor(Math.random() * funfacts.facts.length);
  return funfacts.facts[randomIndex];
};

注：用Math.floor替代Math.round，避免随机索引超出数组范围导致越界错误。

2. 修复DOM加载时机并触发更新函数 #

修改index.js，确保DOM加载完成后执行更新，同时处理异步函数：

import { displayQuote, displayPrediction, displayFunFact } from './modules/display.js';

async function updateResults() {
  const zodiacSigns = ['belier', 'taureau', 'gemeaux', 'cancer', 'lion', 'vierge', 'balance', 'scorpion', 'sagittaire', 'capricorne', 'verseau', 'poissons'];

  for (let sign of zodiacSigns) {
    const ulElement = document.getElementById(sign);
    if (!ulElement) continue; // 跳过不存在的元素，避免报错

    const firstLi = ulElement.children[0];
    firstLi.innerText = await displayPrediction();

    const secondLi = ulElement.children[1];
    secondLi.innerText = await displayQuote();

    const thirdLi = ulElement.children[2];
    thirdLi.innerText = await displayFunFact();
  }
}

// DOM完全加载后执行更新
document.addEventListener('DOMContentLoaded', async () => {
  await updateResults();
});

3. 调整脚本位置，确保DOM渲染完成 #

修改index.html，把脚本标签移到body末尾，确保页面元素先渲染：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>占星洞察，助力美好生活</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <header>
    <h1>占星洞察，助力美好生活</h1>
  </header>
  <aside>"欢迎来到全球最精准的占星网站！..."</aside>
  <hr>
  <h2 class="zodiac-sign">白羊座</h2>
  <ul id="belier">
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
  <hr>
  <h2 class="zodiac-sign">双鱼座</h2>
  <ul id="poissons">
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
  <!-- 脚本移至body末尾，确保DOM已加载 -->
  <script src="index.js" type="module"></script>
</body>
</html>

验证修改 #

完成以上调整后，刷新页面即可看到各星座的li元素被随机内容替换。如果仍有问题，可以打开浏览器控制台（F12）查看是否有报错信息，排查JSON文件路径是否正确。

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