Quiero cambiar las propiedades CSS de forma permanente, en este ejemplo quiero ocultar el texto "Ocultarme" y mostrar "Mostrarme" en su lugar después de hacer clic en el botón "Siguiente".
function Next() { document.querySelector('#hideme').style.display = 'none'; document.querySelector('#showme').style.display = 'block'; } #hideme { display: block; } #showme { display: none; } <form> <input type="text" name="text"> <input type="submit" value="Next" onclick="Next()"> </form> <div id="hideme">Hide Me</div> <div id="showme">Show Me</div>El problema tiene que ver con su código usando el elemento <form> y un <input type="submit"> . De forma predeterminada, un formulario intentará 'publicar' información cuando utilice una entrada de 'enviar'.
Como su formulario no tiene la propiedad de 'acción', activa y vuelve a cargar la página, lo que da la impresión de que hay un problema.
Cambie su marcado HTML y use un <button> con su función de JavaScript para cambiar la(s) página(s).
<div> <input type="text" name="text"> <button onclick="Next()">Next</button> <input type="submit" value="Submit"> </div> <div id="hideme">Hide Me</div> <div id="showme">Show Me</div>