Traté de hacer una función para abrir y cerrar una ventana de reglas y no sé por qué, pero no funciona. Traté de buscar ejemplos para la misma idea, pero como lo intenté, no funcionó, y sí, eso es por favor si alguien sabe deje un comentario
const openRulesBtn = document.getElementById("openRulesBtn"); const rulesWindow = document.getElementById("bgRules"); const closeRulesBtn = document.getElementById("rulesCancelBtn"); openRulesBtn.onclick = openRules(); closeRulesBtn.onclick = closeRules(); function openRules() { rulesWindow.style.display = "block"; } function closeRules() { rulesWindow.style.display = "none"; } .openRulesBtn { display: flex; justify-content: center; align-items: center; width: 7rem; height: 1rem; margin: 2rem 4rem; border: 2px solid hsl(217, 16%, 45%); border-radius: 8px; text-transform: uppercase; } .openRulesBtn:hover { cursor: pointer; } #bgRules { position: absolute; top: 50%; left: 50%; display: none; } #rulesWindow { position: relative; z-index: 10; background-color: white; } #rulesCancelBtn { position: absolute; top: 0; right: 0; z-index: 11; display: flex; justify-content: center; align-items: center; border: 1px solid rgba(0, 0, 0, 0.3); cursor: pointer; } #rulesCancelBtn:hover { background-color: rgb(255, 30, 0); } <div id="bgRules"> <img id="rulesWindow" src="/images/image-rules.svg" alt="" /> <div id="rulesCancelBtn">x</div> </div> <footer> <div class="openRulesBtn" id="openRulesBtn">Rules</div> </footer>functionName() ejecuta/llama a la función. Para agregar detectores de eventos, haga esto:
openRulesBtn.onclick = openRules; closeRulesBtn.onclick = closeRules; const openRulesBtn = document.getElementById("openRulesBtn"); const rulesWindow = document.getElementById("bgRules"); const closeRulesBtn = document.getElementById("rulesCancelBtn"); openRulesBtn.onclick = openRules; closeRulesBtn.onclick = closeRules; function openRules() { rulesWindow.style.display = "block"; } function closeRules() { rulesWindow.style.display = "none"; } .openRulesBtn { display: flex; justify-content: center; align-items: center; width: 7rem; height: 1rem; margin: 2rem 4rem; border: 2px solid hsl(217, 16%, 45%); border-radius: 8px; text-transform: uppercase; } .openRulesBtn:hover { cursor: pointer; } #bgRules { position: absolute; top: 50%; left: 50%; display: none; } #rulesWindow { position: relative; z-index: 10; background-color: white; } #rulesCancelBtn { position: absolute; top: 0; right: 0; z-index: 11; display: flex; justify-content: center; align-items: center; border: 1px solid rgba(0, 0, 0, 0.3); cursor: pointer; } #rulesCancelBtn:hover { background-color: rgb(255, 30, 0); } <div id="bgRules"> <img id="rulesWindow" src="/images/image-rules.svg" alt="" /> <div id="rulesCancelBtn">x</div> </div> <footer> <div class="openRulesBtn" id="openRulesBtn">Rules</div> </footer>