Estoy explorando una mezcla de códigos en javascript, HTML, CSS y bootstrap. Traté de borrar una página haciendo clic en un botón--> document.write(''), luego intenté volver a pintar otro botón. Explique amablemente dónde me he equivocado, si esta es una buena práctica o no. Lo siento, si esto es una tontería. Al hacer clic en el botón uno, suceden dos cosas: 1) La página se borra 2) La propiedad de visibilidad del segundo botón cambia cambiando su nombre de clase (invocando la propiedad de estilo del nuevo nombre de clase)
<style type="text/css"> .bn{visibility:hidden;} .btn{visibility:visible;} </style> <script type="text/javascript"> function newpg(){ document.write(''); document.getElementById('two').className="btn";} </script> </head><body> <div class="container"> <div class="row"> <div class="col-md-6"> <!--some content--> <button id="one" onclick="newpg()">CLEAR &SHOW THE HIDDEN BUTTON</button> <button class="bn" id="two">I'M HERE</button> </div></div></div> <!--bootstrap code inclusion--> </body></html>Como se indica en mi comentario, ninguno elimina todo el contenido de la página. A continuación, intenta encontrar un botón que acaba de eliminar. Esto no va a funcionar.
Necesita ocultar el elemento con JavaScript. Puede hacerlo fácilmente configurando la propiedad de visualización.
Dado que está utilizando bootstrap, debe alternar sus clases. O cambias d-none o invisible
const btn1 = document.getElementById('one'); const btn2 = document.getElementById('two'); function newpg(evt) { evt.preventDefault(); btn1.classList.add('d-none'); btn2.classList.remove('d-none'); } btn1.addEventListener("click", newpg); <!-- CSS only --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-md-6"> <!--some content--> <button id="one">CLEAR &SHOW THE HIDDEN BUTTON</button> <button class="d-none" id="two">I'M HERE</button> </div> </div> </div>Arranque 3
const btn1 = document.getElementById('one'); const btn2 = document.getElementById('two'); function newpg(evt) { evt.preventDefault(); btn1.classList.add('hidden'); btn2.classList.remove('hidden'); } btn1.addEventListener("click", newpg); <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-md-6"> <!--some content--> <button id="one">CLEAR &SHOW THE HIDDEN BUTTON</button> <button class="hidden" id="two">I'M HERE</button> </div> </div> </div>No estoy seguro de lo que está tratando de hacer al borrar toda la página, pero probablemente no esté haciendo lo que cree que está haciendo.
document.write(''); // this indeed clear the whole HTML page document.getElementById('two') // #two doesn't exist anymore since the page is now blank¿Quizás solo desea mostrar/ocultar elementos? Entonces sugeriría usar la propiedad de visualización CSS .
Usando document.write('') en realidad está eliminando cada elemento HTML en su página, por lo que no queda ningún elemento para mostrar a continuación. Debería usar otra función para simplemente eliminar el botón con id one en lugar de eliminar todo. Sugiero document.getElementById('one').style.display="none" . Así que el código sería algo como esto:
<style type="text/css"> .bn{visibility:hidden;} .btn{visibility:visible;} </style> <script type="text/javascript"> function newpg() { document.getElementById('one').style.display="none"; document.getElementById('two').className="btn"; } </script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6"> <!--some content--> <button id="one" onclick="newpg()"> CLEAR &SHOW THE HIDDEN BUTTON </button> <button class="bn" id="two">I'M HERE</button> </div></div></div> <!--bootstrap code inclusion--> </body>