Estoy tratando de hacer algo donde hacer clic en un div cambiaría la visualización de otro div entre bloque y ninguno.
<div id="filtertop" onclick="toggleFilter()">Filter</div> function toggleFilter() { let x = document.getElementById("filter").style.display; if (x == "none") { x = "flex"; } else{ x = "none"; } }Actualmente, el código no hace nada cuando hago clic en el div con id="filtertop"; la pantalla debería estar cambiando a ninguno.
¿Lo dices en serio?
function toggleFilter() { let x = document.getElementById("filter"); if (x.style.display == "none") { x.style.display = "flex"; } else { x.style.display = "none"; } } <div id="filtertop" onclick="toggleFilter()">Filter</div> <div id="filter">div with ID</div>@CherryDT ya explicó el problema con su código en los comentarios.
O tienes que cambiar tu JS a:
function toggleFilter() { let x = document.getElementById("filter"); if (x == "none") { x.style.display = "flex"; } else { x.style.display = "none"; } } La solución más inteligente y moderna sería usar classList.toggle('class-name') como se muestra en el siguiente ejemplo. Eso aplica una clase CSS y alterna. Por lo tanto, no necesita usar una declaración if / else.
function toggleFilter() { document.querySelector('.filter').classList.toggle('d-none'); } .filter { display: flex; } .d-none { display: none; } /* for styling purpose only */ .filter { height: 50vh; background-color: red; grow: 1; margin-top: 20px; } #filtertop { font-size: 2em; } <div id="filtertop" onclick="toggleFilter()">Filter</div> <div class="filter">Filter Element</div>