quiero reemplazar un div que ya se muestra con otro div oculto con solo un clic. no quiero que cambie a continuación se muestra el código.
<html> <script type="text/javascript"> function show(elementId) { document.getElementById("surf").style.display="none"; document.getElementById(elementId).style.display="block"; } </script> <div id="mode" style="display: visible;">Display By Default</div> <div id="surf" style="display: none;">Display On Click</div> <br/> <button type="submit" id="submit" onclick="show('surf');" name="submit">Submit</button> </html> Mi resultado deseado debe ser Display On Click cuando hago clic en el botón.
Pero en este momento tengo Display By Default y Display On Click cuando hago clic en el botón que se display by default en la parte superior y Display On Click en el botón. Solo quiero que Display By Default se reemplace con Display On Click en la misma línea.
<!DOCTYPE html> <html> <body> <div id="div1" style="display:block"> <h2>first div</h2> </div> <div id="div2" style="display:none"> <h2>second div</h2> </div> <button onclick=show()>click here</button> </body> <script> function show() { let div1 = document.querySelector('#div1'); let div2 = document.querySelector('#div2'); if (div1.style.display == "block") { div1.style.display = "none"; div2.style.display = "block"; } else { div1.style.display = "block"; div2.style.display = "none"; } } </script> </html>haga clic en para ocultar div1 y mostrar div2, luego haga clic en ocultar div2 y mostrar div1.
Está apuntando al elemento incorrecto aquí document.getElementById("surf").style.display="none"; . El "surf" debería ser "mode" en su lugar. esto funcionó para mí
function show(elementId) { document.getElementById("mode").style.display="none"; document.getElementById(elementId).style.display="block"; } <div id="mode" style="display: visible;">Display By Default</div> <div id="surf" style="display: none;">Display On Click</div> <br/> <button type="submit" id="submit" onclick="show('surf');" name="submit">Submit</button>