如何将 2 个功能放在一起并使其在 javascript 和 html5 中按我的意愿工作

Question

I am doing a game in which I have to put 100 buttons in a web and touch the start game which will be in the random numbers.

If I touch it, I win but, I have already done it,

They are ordered 1,2,3.... 98,99,100 but now I have to shuffle it.

I have the shuffle function made but I am trying to fuse it but it doesn't work.

It works in the console but I want to render it on the page. See:

var arr = []

const doNotDuplicate = (arr) => {
  for (let i = 1; i <= 100; i++) {
    var current = i
    if(arr.indexOf(current) < 0) {
      arr.push(current)

          var btn = document.createElement("button");
          var t = document.createTextNode(i);
          btn.appendChild(t);
          document.querySelector('#container').appendChild(btn) 
    }
  }  
  return arr
}

function shuffle(arr) {
    var i, j, temp;
    for (i = arr.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));    
        swap(arr, i, j);
    }
    return arr;    
}

the swap is what it permits to change its position and shuffle the numbers

function setup() {
    if(doNotDuplicate(arr)) {
        setInterval(() => {
            console.log(shuffle(arr))
            shuffle(arr)
        }, 1000

and this is the function I said before.

It works in the console but It does not work in the page.

Answer 1

You can either empty the HTML container and append the array elements again, or you can identify the children indicies and swap them with each other, or (as I'm doing below) collect all children into an array, shuffle that array, then call appendChild with those shuffled children:

 const arr = Array.from( { length: 100 }, (_, i) => i + 1 ); const container = document.querySelector('#container'); // Append all buttons for (const num of arr) { container.appendChild(document.createElement('button')).textContent = num; } const children = [...container.children]; start.addEventListener('click', () => { setInterval(() => { // Shuffle children for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [children[i], children[j]] = [children[j], children[i]]; } for (const child of children) { container.appendChild(child); } }, 1000); }, { once: true });

 <div> <button id='start'>START</button> </div> <div id='container'> Press START to begin </div>