Show/hide between two elements randomly onload

user_8698671 0
Viewed 115

I have two elements, .a and .b. By default, both elements have display: none. I want to make one of the two appear randomly when the page loads. Sometimes .a appears, sometimes .b appears, by giving the class .c which will provide display: block.

This is what I have tried but failed because sometimes both are shown and hidden together:

window.addEventListener('load', function() {
  var scenario = Math.random() < .5 ? "c" : "d";

  document.querySelector(".a").classList.add(scenario);
  document.querySelector(".b").classList.add(scenario);

});
.a, .b {display:none}
.a.c, .b.c {display:block}
<div class='a'>aaa</div>
<div class='b'>bbb</div>

css html jquery javascript
1 Answers

Your code doesn't work because you calculate the scenario randomly, but then apply it to both elements.

To do what you require use the Math.random logic to determine which element ot target, either .a or .b, then add the c class to that element only. Try this:

window.addEventListener('load', function() {
  var selector = Math.random() < .5 ? ".a" : ".b";
  document.querySelector(selector).classList.add('c');
});
.a, .b { display: none; }
.a.c, .b.c { display: block; }
<div class="a">aaa</div>
<div class="b">bbb</div>

user_5194130
Related