Prevent repeated divs from being displayed

Question

Prevent repeated divs from being displayed

Navigation

#1 by (1 votes)

0

I use the code below to display a div random of the destino class, but when I run the function, often the same div or div will be repeated. Is there a way to fix it?

        function destino() {
            var E = document.getElementsByClassName("destino");
            var m = E.length;
            var n = parseInt(Math.random()*m);
            for (var i=m-1;i>=0;i--) {
                var e = E[i];
                e.style.display='none';
            }
            E[n].style.display='';
        }

javascript

asked by anonymous 12.09.2017 / 05:09

1 answer

Inserting numeric data into the database How to sum variable value with the value of a variable saved in userdefaults

score 1 · Accepted Answer

Your code is showing several random% of the target class at a time because it has a divs to go from a certain number to for .

As a solution to your problem, you can save the ones that have not yet been shown, calling it 0 , and search for disponiveis random to show dai:

//obter os divs existentes e guardar num array os que ainda não foram sorteados
let disponiveis = Array.from(document.getElementsByClassName("destino"));

function destino() {
    if (disponiveis.length == 0) return; //se não existem mais sai

    const n = parseInt(Math.random()*disponiveis.length); //sorteia apenas 1
    disponiveis[n].style.display=''; //mostra o sorteado

    disponiveis.splice(n,1); //remove do array o que foi sorteado
}

Notice that I changed the get of the elements to div to get an array instead of a Array.from(document.getElementsByClassName("destino")) , which allows me to then use HTMLCollection to remove an element.

Example:

let disponiveis = Array.from(document.getElementsByClassName("destino"));

function destino() {
  if (disponiveis.length == 0) return;

  const n = parseInt(Math.random() * disponiveis.length);
  disponiveis[n].style.display = 'block';
  disponiveis.splice(n, 1);
}

document.getElementById("sortear").onclick = function(){
  destino();
};

.destino {
  display:none;
}

<div class="destino">D1</div>
<div class="destino">D2</div>
<div class="destino">D3</div>
<div class="destino">D4</div>
<div class="destino">D5</div>
<div class="destino">D6</div>
<div class="destino">D7</div>

<button id="sortear">Sortear</button>

In the example if we wanted to stick with the order in which it was drawn, it would be better to add the drawn ones to another splice :

let disponiveis = Array.from(document.getElementsByClassName("destino"));
const sorteados = document.getElementById("sorteados"); //div para sorteados

function destino() {
  if (disponiveis.length == 0) return;

  const n = parseInt(Math.random() * disponiveis.length);
  disponiveis[n].style.display = 'block';
  sorteados.appendChild(disponiveis[n]); //adicionar aos sorteados
  disponiveis.splice(n, 1);
}

document.getElementById("sortear").onclick = function(){
  destino();
};

.destino {
  display:none;
}

<div class="destino">D1</div>
<div class="destino">D2</div>
<div class="destino">D3</div>
<div class="destino">D4</div>
<div class="destino">D5</div>
<div class="destino">D6</div>
<div class="destino">D7</div>

<button id="sortear">Sortear</button>
<div id="sorteados"></div><!-- div para colocar os sorteados-->