如何在多个 HTML 元素中重复显示不同的随机数（基于 class 批量赋值）-js教程-PHP中文网

如何在多个 HTML 元素中重复显示不同的随机数（基于 class 批量赋值）

本文讲解如何用 JavaScript 为多个具有相同 class 的元素分别生成并显示独立的随机数，解决因重复使用 id 导致仅首个元素生效的问题。

本文讲解如何用 javascript 为多个具有相同 class 的 `` 元素分别生成并显示独立的随机数，解决因重复使用 `id` 导致仅首个元素生效的问题。

在 Web 开发中，id 属性在 HTML 中必须唯一——这意味着 document.getElementById("yourNumber1") 永远只返回第一个匹配元素，后续同名 id 会被浏览器忽略，造成“只有第一个显示、其余为空”的现象。要向多个元素批量写入各自独立的随机值，正确做法是：改用 class 标识同类元素，并通过 querySelectorAll() + 循环为每个元素单独赋值。

以下是完整、可运行的解决方案：

✅ HTML 结构（修正重复 id 为 class）：

<span id="yourNumber"></span> user log<br><span class="yourNumber1">1</span> users logs<br><span class="yourNumber1">2</span> users logs<br><span class="yourNumber1">3</span> users logs<br><span class="yourNumber1">4</span> users logs

✅ JavaScript 逻辑（为每个 .yourNumber1 元素生成独立随机数）：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

var min = 50;
var max = 150;
var play1;

window.onload = function () {
  // 第一步：生成并显示 play1
  play1 = Math.floor(Math.random() * (max - min + 1)) + min;
  document.getElementById("yourNumber").textContent = play1;

  // 第二步：获取所有 class="yourNumber1" 的元素
  const numberSpans = document.querySelectorAll(".yourNumber1");

  // 第三步：遍历每个 span，为其独立生成随机数
  numberSpans.forEach(span => {
    let randomValue;
    if (play1 <p>⚠️ <strong>关键注意事项：</strong>  </p>

永远避免重复 id：HTML 规范严格要求 id 唯一；重复 id 不仅使 getElementById 失效，还可能影响 CSS 样式、无障碍访问及 SEO。
textContent 优于 innerHTML：当仅插入纯数字文本时，使用 textContent 更安全、高效，避免潜在 XSS 风险。
逻辑健壮性：原代码中 max = 10 - play1 在 play1 > 10 时会令 max 为负，导致 Math.random() * (max - min + 1) 计算出 NaN 或负范围。本方案已规避该风险，并明确区分两种分支逻辑。
性能友好：querySelectorAll 返回静态 NodeList，配合 forEach 清晰易读；如需兼容旧浏览器（如 IE8），可用 getElementsByClassName + for 循环替代。