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

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

本文教你如何用 JavaScript 为多个具有相同 class 的元素分别生成并显示独立的随机数，解决因重复使用相同 ID 导致仅首个元素生效的问题。核心是改用 querySelectorAll + forEach 批量操作。

本文教你如何用 javascript 为多个具有相同 class 的 `` 元素分别生成并显示独立的随机数，解决因重复使用相同 id 导致仅首个元素生效的问题。核心是改用 `queryselectorall` + `foreach` 批量操作。

在 Web 开发中，HTML 的 id 属性必须唯一——若多个元素共享同一 id（如多个），document.getElementById() 将只返回第一个匹配元素，其余被忽略，这正是你遇到“只有第一个显示、其余为空”的根本原因。

正确做法是：将重复使用的标识改为 class，再通过 document.querySelectorAll('.yourNumber1') 获取所有匹配节点，配合循环为每个元素独立赋值。以下是优化后的完整实现：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

<!-- HTML：确保 id 唯一，重复元素使用 class -->
<span id="yourNumber"></span> <!-- 主随机数，唯一 ID -->
<span class="yourNumber1"></span>
<span class="yourNumber1"></span>
<span class="yourNumber1"></span>
<span class="yourNumber1"></span>

// JavaScript：批量生成独立随机数
var min = 50;
var max = 150;
var play1;

window.onload = function () {
  // 生成第一个随机数（50–150）
  play1 = Math.floor(Math.random() * (max - min + 1)) + min;
  document.getElementById("yourNumber").textContent = play1;

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

  // 为每个 span 独立生成并设置随机数
  numberSpans.forEach(function(span) {
    let play2;
    if (play1 <p>✅ <strong>关键要点说明：</strong>  </p>

ID 必须唯一：id="yourNumber1" 出现多次违反 HTML 规范，务必改为 class="yourNumber1"；
避免全局变量污染：play2 应在循环内声明（如 let play2），确保每次迭代作用域隔离；
逻辑健壮性：原代码中 max = 10 - play1 在 play1 > 10 时会使 max 为负，导致 Math.random() * (max - min + 1) 计算异常，已统一调整为安全范围 1–10；
性能与可读性：使用 textContent 替代 innerHTML（无 HTML 标签时更安全、更快）；
扩展性：只需增减 HTML 中的，JS 逻辑自动适配，无需修改。