如何在多个span中显示不同随机数？JavaScript问题求助

数据老陈

2026-7-3

问题解决方案

核心问题

HTML中id是唯一标识符，document.getElementById()只会返回第一个匹配该id的元素，所以你后面三个<span id="yourNumber1">永远不会被赋值，自然显示空白。

修复步骤

修改HTML结构：将重复的id="yourNumber1"改为class="yourNumber1"，class允许重复使用
调整JavaScript逻辑：遍历所有class为yourNumber1的元素，为每个元素生成独立的随机数

完整代码示例

修改后的HTML

(<span id="yourNumber"></span> user log)

(<span class="yourNumber1"></span> users logs)
(<span class="yourNumber1"></span> users logs)
(<span class="yourNumber1"></span> users logs)
(<span class="yourNumber1"></span> users logs)

修改后的JavaScript

var min = 50;
var originalMax = 150; // 保留原始max值，避免被修改后影响后续计算
var play1;

window.onload = function() {
  // 生成第一个随机数
  play1 = Math.floor(Math.random() * (originalMax - min + 1)) + min;
  document.getElementById("yourNumber").innerHTML = play1;

  // 计算play2的生成规则参数
  var play2Max, play2Min;
  if (play1 < 10) {
    play2Max = 10 - play1;
    play2Min = min;
  } else {
    play2Max = 10;
    play2Min = 1;
  }

  // 遍历所有yourNumber1元素，逐个生成随机数
  var numberElements = document.querySelectorAll(".yourNumber1");
  numberElements.forEach(function(element) {
    var play2 = Math.floor(Math.random() * (play2Max - play2Min + 1)) + play2Min;
    element.innerHTML = play2;
  });
}