2

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>

2 respuestas 2

2

Al buscar por Id, los bloques tienen que tener el id informado. Si no, nunca lo encontrarás.

Si quieres que desde el inicio sólo se muestre uno, puedes dejar la propiedad style="display:none" informada desde el principio en el bloque 2

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 id="bloque1" class="bloque1">Texto 1
			<input type="button" value="Mostrar texto 2" onclick="muestra2();">
		</div>
		<div style="display:none" id="bloque2" class="bloque2">Texto 2
			<input type="button" value="Mostrar texto 1" onclick="muestra1();">
		</div>

	</body>

</html>

0

Básicamente que estás tratando de obtener un elemento por medio de su id pero este no esta declarado como atributo de tu etiqueta HTML.

Por lo anterior entonces te dará error de:

"TypeError: Cannot read property 'style' of null

Entonces lo que debes hacer es colocarlo como atributo en cada uno de ellos del modo siguiente:

<input type="button" id="bloque1" value="Mostrar texto 2" onclick="muestra2();">
<input type="button" id="bloque2" value="Mostrar texto 1" onclick="muestra1();">

Al final a tu código lo podemos dejar como:

  • Inicialmente al div completo que contiene al segundo botón y texto colócale un display none que después mediante JS modificaremos
  • Obtienes las dos secciones que representan a los divs así como los 2 botones
  • A cada botón le añades un listener en el evento click y solo modificas a los divs correspondientes según sea el caso pasándolos de none a block
  • Es un punto de partida para sacar el llamado a la función de las etiquetas HTML lo cual se hace un tanto invasivo

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	</head>
        <style>
          .bloque2 {
            display: none;
          }
        </style>
    	<body>
    
    		<h3>Cambiar texto y botón</h3>
    		<hr>
    		<div class="bloque1">Texto 1
    			<input type="button" id="bloque1" value="Mostrar texto 2">
    		</div>
    
    		<div class="bloque2">Texto 2
    			<input type="button" id="bloque2" value="Mostrar texto 1">
    		</div>
    <script>
    let boton2  = document.getElementById("bloque1")
    let boton1  = document.getElementById("bloque2")
    let bloque1 = document.querySelector(".bloque1")
    let bloque2 = document.querySelector(".bloque2")
    
    boton2.addEventListener("click", () => {
      bloque1.style.display = "none"
      bloque2.style.display = "block"
    })
    
    boton1.addEventListener("click", () => {
      bloque1.style.display = "block"
      bloque2.style.display = "none"
    })
    </script>
    	</body>
    
    </html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.