Randomly show max 3 blocks per page-CodePudding

I have several blocks in the form of circles.

I made it so that when you click on the block, it dissolves. But if you dissolve all the blocks, the page will remain empty.

How can I make it so that there are a maximum of 3 blocks on the page, which are selected randomly? Also, the page is never blank.

To select 3 random I use

var randomnumber = Math.floor(Math.random()*10)   1;
var circle1 = $('#circle'   randomnumber);
var circle2 = $('#circle'   randomnumber);
var circle3 = $('#circle'   randomnumber);

But I can't hide everything and still show 3 selected ones. In addition, when we clicked on one of them and it disappeared, a new one should appear in its place

I tried to style all blocks visibility: hidden; and in the script like this var circle1 = $('#circle' randomnumber).css('visibility', 'visible'); but in the end nothing comes up.

$("div").click(function() {
  $(this).fadeOut("slow");
});

const nodes = document.querySelectorAll('.animation');
for(let i = 0; i < nodes.length; i  ) {
  nodes[i].addEventListener('click', (event) => {
    event.target.style.animation = 'Animation 200ms linear';
    setTimeout(() => {
      event.target.style.animation = '';
    }, 220);  });
}

.circle {
  clip-path: circle(50%);
  height: 50px;
  width: 50px;
  margin: 20px;
}

.circle1 {
  background: #456BD9;
}
.circle2 {
  background: #fb6df9;
}
.circle3 {
  background: #6de2fb;
}
.circle4 {
  background: #81fb6d;
}
.circle5 {
  background: #e9fb6d;
}
.circle6 {
  background: #6bfc90;
}
.circle7 {
  background: #a5950a;
}
.circle8 {
  background: #a50a74;
}
.circle9 {
  background: #ff0c00;
}
.circle10 {
  background: #06aec2;
}

@keyframes Animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(.8);
  }
  100% {
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>

CodePudding user response：

To only show 3 circles, you need to remember which 3 you have. You could use 3 variables and compare new values with each, but easier to use an array - this also gives you flexibility in case you want to have 4 or 5 in the future - just change the counter.

var rlist = [];
for (var i = 0; i < 3;   i) {
  var r;
  while (rlist.includes(r = Math.floor(Math.random() * 9)   1))
    ;
  rlist.push(r);
}

this uses an "empty while" which just saves having to add the r=Math.floor code twice (before the while and inside it)

You can then use that array to show the circles

rlist.forEach(r => $('.circle'   r).show());

clicking and showing a new one works the same way, but this time you want to update the array with the one that was just clicked. You could parse the classList and find your circleN, but it's easier just to add a data- attribute on each circle and read that.

var this_r = $(this).data("circle");
rlist[rlist.indexOf(this_r)] = r;

Finally (not asked), you can use $('.circle' r).appendTo(".wrapper") to move the circle about to be shown to the end - this means the newly displayed one is always last rather than sometimes after the one you clicked and sometimes after. You could instead use $('.circle' r).insertAfter(this) and it will always replace the one just clicked.

Updated snippet:

$(".circle").hide();

var rlist = [];
for (var i = 0; i < 3;   i) {
  var r;
  while (rlist.includes(r = Math.floor(Math.random() * 9)   1))
    ;
  rlist.push(r);
}

rlist.forEach(r => $('.circle'   r).show());


$(".circle").click(function() {
  $(this).fadeOut("slow", function() {
    var r;
    // can assume "this" circle is already in rlist, so don't need to handle it differently
    while (rlist.includes(r = Math.floor(Math.random() * 9)   1))
        ;

    // remove this_r from the list and and next_r
    var this_r = $(this).data("circle");
    rlist[rlist.indexOf(this_r)] = r;

    // move to the end and show
    $('.circle'   r).insertAfter(this).show();
  });
});

.circle {
  clip-path: circle(50%);
  height: 50px;
  width: 50px;
  margin: 20px;
}

.circle1 {
  background: #456BD9;
}

.circle2 {
  background: #fb6df9;
}

.circle3 {
  background: #6de2fb;
}

.circle4 {
  background: #81fb6d;
}

.circle5 {
  background: #e9fb6d;
}

.circle6 {
  background: #6bfc90;
}

.circle7 {
  background: #a5950a;
}

.circle8 {
  background: #a50a74;
}

.circle9 {
  background: #ff0c00;
}

.circle10 {
  background: #06aec2;
}

@keyframes Animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(.8);
  }
  100% {
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='wrapper'>
  <div  data-circle="1"></div>
  <div  data-circle="2"></div>
  <div  data-circle="3"></div>
  <div  data-circle="4"></div>
  <div  data-circle="5"></div>
  <div  data-circle="6"></div>
  <div  data-circle="7"></div>
  <div  data-circle="8"></div>
  <div  data-circle="9"></div>
  <div  data-circle="10"></div>
</div>