как соединить 2 функции и заставить их работать так, как я хочу в javascript и html5

Question

Я делаю игру, в которой я должен поместить 100 кнопок в сеть и коснуться стартовой игры, которая будет случайным образом.

Если я коснусь этого, я выиграю, но у меня уже есть сделали это,

Они заказали 1,2,3 .... 98,99,100, но теперь я должен перемешать это.

У меня есть функция shuffle, но я пытаюсь ее слить, но она не работает.

Она работает в консоли, но я хочу отобразить ее на странице. См .:

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

Своп - это то, что он позволяет изменить свою позицию и перетасовать числа

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

, и эту функцию я говорил ранее.

Он работает в консоли, но не работает на странице.

Answer 1

Вы можете либо очистить контейнер HTML и снова добавить элементы массива, либо вы можете идентифицировать дочерние индикаторы и поменять их местами, либо (как я делаю ниже) собрать все дочерние элементы в массив, перемешать этот массив, затем вызовите appendChild с этими перемешанными потомками:

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>