Tengo el siguiente código y mi objetivo es:
- Inicialmente quiero mostrar solo el Texto 1 y el botón 1
- Al pulsar el botón 1 con el texto
Mostrar texto 2
, me oculte el Texto 1 y el botón 1 y me muestre el Texto 2 y el botón 2 y asi sucesívamente.
¿Pueden ayudarme? Gracias!!
function muestra1(){
document.getElementById('bloque1').style.display="block";
document.getElementById('bloque2').style.display="none";
};
function muestra2(){
document.getElementById('bloque1').style.display="none";
document.getElementById('bloque2').style.display="block";
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h3>Cambiar texto y botón</h3>
<hr>
<div class="bloque1">Texto 1
<input type="button" value="Mostrar texto 2" onclick="muestra2();">
</div>
<div class="bloque2">Texto 2
<input type="button" value="Mostrar texto 1" onclick="muestra1();">
</div>
</body>
</html>