index.html <div id="cajademo">
<h3 id="titulodemo" tabindex="-1">Haz clic en el botón</h3>
<p id="parrafodemo">Este cuadro va a cambiar de color,
de título y de contenido usando JavaScript.</p>
<button id="botonprobar" onclick="modificar()">
¿Cómo hacer un botón con función?
</button>
<button id="botonvolver" class="oculto" onclick="limpiar()">
Volver
</button>
</div>
<script src="javascript/index.js"></script> javascript/index.js // Guardamos el contenido original de la demo para que
// "Volver" lo deje exactamente igual
const tituloOriginal = document.getElementById("titulodemo").innerHTML;
const parrafoOriginal = document.getElementById("parrafodemo").innerHTML;
function modificar() {
// esto selecciona mediante el ID lo que quieres modificar
let caja = document.getElementById("cajademo");
// esto es una modificación
caja.style.backgroundColor = "var(--acento-suave)";
let titulo = document.getElementById("titulodemo");
titulo.innerHTML = "¿Cómo hiciste esto?";
let parrafo1 = document.getElementById("parrafodemo");
// El código a mostrar está guardado en un <template>
// dentro de index.html
parrafo1.innerHTML = "Bueno, la explicación está en el siguiente código:"
+ document.getElementById("codigodemo").innerHTML;
// Escondemos el botón de probar y mostramos el de volver
document.getElementById("botonprobar").style.display = "none";
document.getElementById("botonvolver").style.display = "inline-flex";
// El botón que tenía el foco acaba de desaparecer:
// se lo damos al título nuevo
document.getElementById("titulodemo").focus();
}
function limpiar() {
let caja = document.getElementById("cajademo");
caja.style.backgroundColor = "";
let titulo = document.getElementById("titulodemo");
titulo.innerHTML = tituloOriginal;
let parrafo1 = document.getElementById("parrafodemo");
parrafo1.innerHTML = parrafoOriginal;
document.getElementById("botonprobar").style.display = "inline-flex";
document.getElementById("botonvolver").style.display = "none";
// Y al volver, el foco pasa al botón que reaparece
document.getElementById("botonprobar").focus();
} 
