javascript 使用一个 getElementById 多次随机数

Question

我想在跨度 ID 中多次使用随机数结果 但即使克隆或委托结果也只会在结果中出现一次，而其他结果则显示为空白

我不知道该怎么做，它可以帮助我吗？

javascript

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


window.onload = function() {
  play1 = Math.floor(Math.random() * (max - min + 1)) + min;
  max = 10 - play1
  document.getElementById("yourNumber").innerHTML = play1;

  if (play1 < 10 ) {
    play2 = Math.floor(Math.random()*(max-min+1)) + min; 
  } else {
    play2 = Math.floor(Math.random() * 10) + 1;
  }
  document.getElementById("yourNumber1").innerHTML = play2;

}

HTML

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

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

谢谢你！

尝试克隆并委托随机数

需要用不同的数字显示其他四个结果

Answer 1

将 id 替换为 class，因为它是唯一值

身体

<span id="yourNumber"></span>
<span class="yourNumber1">1</span>
<span class="yourNumber1">2</span>
<span class="yourNumber1">3</span>
<span class="yourNumber1">4</span>

要更改四个元素的值，我们需要使用循环。
由于它们都包含在同一类中，因此我们使用

querySelectorAll

来获取节点。

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

    window.onload = function () {
      play1 = Math.floor(Math.random() * (max - min + 1)) + min;
      max = 10 - play1; // Move max up to make play1 less than 10
      document.getElementById("yourNumber").innerHTML = play1;

      const spans = document.querySelectorAll(".yourNumber1"); //get nodes
      spans.forEach((el) => { //loop
        if (play1 < 10) { //play1 is always greater than 10
          play2 = Math.floor(Math.random() * (max - min + 1)) + min;
        } else {
          play2 = Math.floor(Math.random() * 10) + 1;
        }
        el.textContent = play2;
      });
    };