How to randomize the position of buttons when i open the page?

Question

good afternoon!
I'm creating a little game for my first project on JavaScript, that will be a 10-button site where only one gives the prize. But I wanna randomize the order of the buttons, so, everytime i open the page, the right choice could be anywhere. How could i do this?
Here is my JavaScript and HTML code.

const buttons = document.querySelector('input.premio');


buttons.addEventListener('click', createParagraph);

function createParagraph() {
  let para = document.createElement('h3');
  para.textContent = 'VOCÊ ACERTOU!';
  document.body.appendChild(para);
  let newbtn = document.createElement('button');
  newbtn.textContent = 'Fechar guia';
  document.body.append(newbtn);
  newbtn.addEventListener('click', Fechar);
}

function Fechar() {
  window.close();
}

const fake1 = document.querySelector('input.btn1');

fake1.addEventListener('click', closewindow1);

function closewindow1() {
  window.close();
}

const fake2 = document.querySelector('input.btn2');

fake2.addEventListener('click', closewindow2);

function closewindow2() {
  window.close();
}

const fake3 = document.querySelector('input.btn3');

fake3.addEventListener('click', closewindow3);

function closewindow3() {
  window.close();
}

const fake5 = document.querySelector('input.btn5');

fake5.addEventListener('click', closewindow5);

function closewindow5() {
  window.close();
}

const fake6 = document.querySelector('input.btn6');

fake6.addEventListener('click', closewindow6);

function closewindow6() {
  window.close();
}

const fake7 = document.querySelector('input.btn7');

fake7.addEventListener('click', closewindow7);

function closewindow7() {
  window.close();
}

const fake8 = document.querySelector('input.btn8');

fake8.addEventListener('click', closewindow8);

function closewindow8() {
  window.close();
}

const fake9 = document.querySelector('input.btn9');

fake9.addEventListener('click', closewindow9);

function closewindow9() {
  window.close();
}

const fake10 = document.querySelector('input.btn10');

fake10.addEventListener('click', closewindow10);

function closewindow10() {
  window.close();
}

<header>
  <h1>Jogo dos botões</h1>
  <h3>Será que você é capaz de encontrar o botão premiado?</h3>
</header>
<div class="container">
  <div class='allButtons'>
    <div class="botao1">
      <input type="button" value="Será que é aqui?" class='btn1'>
    </div>
    <div class="botao2">
      <input type="button" value="Será que é aqui?" class='btn2'>
    </div>
    <div class="botao3">
      <input type="button" value="Será que é aqui?" class='btn3'>
    </div>
    <div class="botao4">
      <input type="button" value="Será que é aqui?" class='premio'>
    </div>
    <div class="botao5">
      <input type="button" value="Será que é aqui?" class='btn5'>
    </div>
    <div class="botao6">
      <input type="button" value="Será que é aqui?" class='btn6'>
    </div>
    <div class="botao7">
      <input type="button" value="Será que é aqui?" class='btn7'>
    </div>
    <div class="botao8">
      <input type="button" value="Será que é aqui?" class='btn8'>
    </div>
    <div class="botao9">
      <input type="button" value="Será que é aqui?" class='btn9'>
    </div>
    <div class="botao10">
      <input type="button" value="Será que é aqui?" class='btn10'>
    </div>
  </div>
  </main>

how about defining your buttons into an array and then you shuffle your array randomly like in here https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array and display them — Karim Chaari, Apr 30 '21 at 20:49
Does this answer your question? [javascript - shuffle HTML list element order](https://stackoverflow.com/questions/7070054/javascript-shuffle-html-list-element-order) — zoldxk, Apr 30 '21 at 21:05

YoYo · Accepted Answer · 2021-04-30T21:08:58.237

Okay! I think this is what are you looking for.

<script>
function prize() {
    alert('prizee');
}
function closewindow() {
    window.close();
}

var random = Math.floor(Math.random() * 10) + 1; //we select a random number between 1 (inclusive) and 10 (inclusive)

// now we get the random number and we will set a event with prize function or what you want to do to the button which have this number in class 
// the rest of buttons will have set event with close window function.
// important is all buttons should have the class: btn1, btn2, btn3 ..., btn10
for(var i=1;i<=10;i++) {
console.log(i);
    var button = document.querySelector('input.btn' + i);
    if(random == i) {
        button.addEventListener('click', prize);
    }
    else {
        button.addEventListener('click', closewindow);
    }
}
</script>

function prize() {
  alert('prizee');
}

function closewindow() {
  window.close();
}

var random = Math.floor(Math.random() * 9) + 1; //we select a random number between 1 (inclusive) and 10 (inclusive)

// now we get the random number and we will set a event with prize function or what you want to do
// the rest of buttons will have set event with close window function.
// important is all buttons should have the class: btn1, btn2, btn3 ..., btn10
for(var i=1;i<=10;i++) {
  var button = document.querySelector('input.btn' + i);
    if(random == i) {
    button.addEventListener('click', prize);
    }
    else {
        button.addEventListener('click', closewindow);
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jogo dos Botões</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Jogo dos botões</h1>
        <h3>Será que você é capaz de encontrar o botão premiado?</h3>
    </header>
    <div class="container">
        <div class='allButtons'>
            <div class="botao1">
                <input type="button" value="Será que é aqui?" class='btn1'>
            </div>
            <div class="botao2">
                <input type="button" value="Será que é aqui?" class='btn2'>
            </div>
            <div class="botao3">
                <input type="button" value="Será que é aqui?" class='btn3'>
            </div>
            <div class="botao4">
                <input type="button" value="Será que é aqui?" class='btn4'>
            </div>
            <div class="botao5">
                <input type="button" value="Será que é aqui?" class='btn5'>
            </div>
            <div class="botao6">
                <input type="button" value="Será que é aqui?" class='btn6'>
            </div>
            <div class="botao7">
                <input type="button" value="Será que é aqui?" class='btn7'>
            </div>
            <div class="botao8">
                <input type="button" value="Será que é aqui?" class='btn8'>
            </div>
            <div class="botao9">
                <input type="button" value="Será que é aqui?" class='btn9'>
            </div>
            <div class="botao10">
                <input type="button" value="Será que é aqui?" class='btn10'>
            </div>
        </div>
    </main>
</body>
</html>

score 0 · Answer 2 · answered Apr 30 '21 at 21:10

It is better to choose a button at random

var random = Math.floor(Math.random() * 10) + 1;
const button = document.querySelector('input.btn' + random);
button.addEventListener('click', createParagraph);
function createParagraph() {
    let para = document.createElement('h3');
    para.textContent = 'VOCÊ ACERTOU!';
    document.body.appendChild(para);
    let newbtn = document.createElement('button');
    newbtn.textContent = 'Fechar guia';
    document.body.append(newbtn);
    newbtn.addEventListener('click', Fechar);
}
function Fechar() {
    window.close();
}

<header>
  <h1>Jogo dos botões</h1>
  <h3>Será que você é capaz de encontrar o botão premiado?</h3>
</header>
<div class="container">
  <div class='allButtons'>
    <div class="botao1">
      <input type="button" value="Será que é aqui?" class='btn1'>
    </div>
    <div class="botao2">
      <input type="button" value="Será que é aqui?" class='btn2'>
    </div>
    <div class="botao3">
      <input type="button" value="Será que é aqui?" class='btn3'>
    </div>
    <div class="botao4">
      <input type="button" value="Será que é aqui?" class='premio'>
    </div>
    <div class="botao5">
      <input type="button" value="Será que é aqui?" class='btn5'>
    </div>
    <div class="botao6">
      <input type="button" value="Será que é aqui?" class='btn6'>
    </div>
    <div class="botao7">
      <input type="button" value="Será que é aqui?" class='btn7'>
    </div>
    <div class="botao8">
      <input type="button" value="Será que é aqui?" class='btn8'>
    </div>
    <div class="botao9">
      <input type="button" value="Será que é aqui?" class='btn9'>
    </div>
    <div class="botao10">
      <input type="button" value="Será que é aqui?" class='btn10'>
    </div>
  </div>
  </main>

How to randomize the position of buttons when i open the page?

2 Answers2