function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display = "none") { x.style.display = "block"; } else { x.style.display = "none"; } } <ul> <li><button onclick="myFunction()">Try it</button> <div id="myDIV"><p>This is my DIV element.</p></div </li> </ul>En el archivo css incluí el comando: #myDIV{ display: none; } porque de lo contrario el texto no estaría oculto al principio. Con este código el texto se oculta al principio y si hago clic en el botón muestra el texto. Pero luego, si vuelvo a hacer clic en el botón, debería estar cerrando el texto que no es así. ¿Puede alguien ayudarme aquí? ¡Gracias!
Establezca esto en HTML
<div id="myDIV" style="display: none;"><p>This is my DIV element.</p></div>y este javascript
function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display == "none") { x.style.display = "block"; } else { x.style.display = "none"; } }Esto ahora funcionará porque la visualización de ninguno no está predeterminada en el elemento div, por lo que javascript no verá el estilo de visualización de ninguno y no ejecutará la función. Por lo tanto, debe especificar el estilo de visualización ninguno y la función funcionará correctamente
= es asignación. == y === son comparaciones. Entonces, dentro del if , cámbielo a uno de esos dos.
Tampoco cerró correctamente el <div> en el código que envió.
Otra cosa es que está configurando la display: none en un archivo CSS. JavaScript no tiene acceso a este valor, solo tiene acceso a style="..." en el marcado HTML del elemento. Para solucionar este problema, compruebe si no está oculto y cambie los lados del bloque if/else .
function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display == "block") { // `=` to `==` or `===` x.style.display = "none"; } else { x.style.display = "block"; } } #myDIV { display: none; } <ul> <li><button onclick="myFunction()">Try it</button> <div id="myDIV"> <p>This is my DIV element.</p> </div> <!-- this div wasn't closed properly --> </li> </ul> function myFunction() { var x = document.getElementById("myDIV"); x.style.display = x.style.display != "block"?"block":"none" } #myDIV{ display: none; } <ul> <li><button onclick="myFunction()">Try it</button> <div id="myDIV"><p>This is my DIV element.</p></div </li> </ul>