Tengo dos elementos, .a y .b . Por defecto, ambos elementos tienen display: none . Quiero que uno de los dos aparezca al azar cuando se carga la página. A veces aparece .a , a veces aparece .b , dando la clase .c que proporcionará display: block .
Esto es lo que he intentado pero fallé porque a veces ambos se muestran y ocultan juntos:
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} .ac, .bc {display:block} <div class='a'>aaa</div> <div class='b'>bbb</div>Su código no funciona porque calcula el scenario al azar, pero luego lo aplica a ambos elementos.
Para hacer lo que necesita, use la lógica Math.random para determinar qué elemento ot objetivo, ya sea .a o .b , luego agregue la clase c solo a ese elemento. Prueba esto:
window.addEventListener('load', function() { var selector = Math.random() < .5 ? ".a" : ".b"; document.querySelector(selector).classList.add('c'); }); .a, .b { display: none; } .ac, .bc { display: block; } <div class="a">aaa</div> <div class="b">bbb</div>