Show/hide between two elements randomly onload

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>

Answer

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>