Soy bastante nuevo en JavaScript (y en la codificación en general) y estoy tratando de hacer que los elementos de imagen dentro de un div sean visibles cuando se hace clic en algo y luego, cuando se vuelve a hacer clic en lo mismo, dichos elementos deben ocultarse nuevamente.
Sé que tampoco soy bueno explicando, así que aquí está el código:
HTML:
<body class="background-dark"> <div class="popup" id="popupWindow"> <img onclick="openMenu()" src="img/add.png" id="add"> <div class="menu"> <div class="popup sizeM"> <h1>M</h1> </div> <div class="popup sizeL"> <h1>L</h1> </div> </div> </div>CSS:
.popup .sizeM, .sizeL { position: fixed; width: 45px; height: 45px; font-family: 'Roboto', sans-serif; background-color: rgba(128, 9, 250, 0.550); color: white; border: 1px #262626; border-radius: 50%; text-align: center; left: auto; right: auto; margin-left: 17px; } .menu { display: none; }JavaScript
function openMenu() { let pops = document.getElementById('add'); pops.addEventListener('click', openPops); function openPops() { document.querySelector('.menu').style.display = 'flex'; } } Por el momento, solo puedo hacer visibles los elementos M y L, ya que son invisibles desde display: none .
Probé algo como
const check = false; function openMenu() { let pops = document.getElementById('add'); pops.addEventListener('click', openPops); function openPops() { if (!check) { document.querySelector('.menu').style.display = 'flex'; check = true; closePops(function() { if (check = true) { document.querySelector('.menu').style.display = 'none'; check = false; } }); } } }Y otras formas similares de escribirlo y parece que no puedo entenderlo.