javascript random number multiple times with one getElementById

54 Views Asked by At

I want to use a random number result in a span id multiple times But even cloning or delegating the result only appears once in the result and others appear blank

I don't know how to do it could help me?

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)

thank you!

Try to clone and delegate the random number

Need display the other four results with a different number

1

There are 1 best solutions below

0
Odri On

replace id with class because it is a unique value

body

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

to change the values of the four elements, we need to use a loop.
since they are all enclosed in the same class, we use querySelectorAll to get the nodes.

    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;
      });
    };