¿Cómo ocultar un div y mostrar otro div usando el botón onclick?

Tengo dos div en mi archivo html. Quiero ocultar el 1er div y mostrar otro div en el botón de entrada html en el evento onclick .

Aquí está mi código,

 function switchVisible() { if (document.getElementById('Div1') !== undefined) { if (document.getElementById('Div1').style.display == 'Block') { document.getElementById('Div1').style.display = 'none'; document.getElementById('Div2').style.display = 'Block'; } else { document.getElementById('Div1').style.display = 'Block'; document.getElementById('Div2').style.display = 'none'; } } } 
 #Div2 { display: none; } 
  

Pero no está funcionando. Cualquier ayuda será apreciada.

Gracias.

1) Dentro de clic, no tiene que usar “javascript:”, eso está implícito.

2) Comprueba “display: block”, siempre compruebo “display: none” (porque la pantalla también puede ser “inline-block”, etc.)

Prueba esto:

 function switchVisible() { if (document.getElementById('Div1')) { if (document.getElementById('Div1').style.display == 'none') { document.getElementById('Div1').style.display = 'block'; document.getElementById('Div2').style.display = 'none'; } else { document.getElementById('Div1').style.display = 'none'; document.getElementById('Div2').style.display = 'block'; } } } 
 #Div2 { display: none; } 
 
Div 1
Div 2

Como está etiquetado con jQuery, aquí está la respuesta jQuery simple

 $('body').on("click touchstart", "#Button1", function(e){ $("#Div1, #Div2").toggle(); }); 

use on para escuchar el ID #Button, he usado tanto el clic como el touchstart para que sea compatible con dispositivos móviles, y luego use alternar (), que establece el estado de la pantalla: al contrario de lo que es ahora. Entonces, si fue display: none, se convierte en display: block, si fue display: block se convierte en display: none

Prueba esto:

 var div1 = document.getElementById('Div1'), div2 = document.getElementById('Div2'); function switchVisible() { if(!div1) return; if (getComputedStyle(div1).display == 'block') { div1.style.display = 'none'; div2.style.display = 'block'; } else { div1.style.display = 'block'; div2.style.display = 'none'; } } document.getElementById('Button1').addEventListener('click', switchVisible); 
 #Div2 { display:none; } 
 
Div 1
Div 2

es posible que quieras probar esto …

  function switchVisible() { var div1=document.getElementById('Div1'); var div2=document.getElementById('Div2'); if (div1 !== undefined && div2 !== undefined) { div1.style.display = div2.style.display === '' ? 'none' : div2.style.display === 'none' ? 'none' : 'block'; div2.style.display = div1.style.display === 'block' ? 'none' : 'block'; } } 
 #Div1{ display: block; background: blue; } #Div2 { display: none; background: red; } .divs { width: 50px; height: 50px; border: 1px solid #000; } 
  

Probablemente tengas algunos errores de syntax en tu código. Este está funcionando:

 function switchVisible() { if (document.getElementById('Div1') !== undefined) { if (document.getElementById('Div1').style.display == 'block') { document.getElementById('Div1').style.display = 'none'; document.getElementById('Div2').style.display = 'block'; } else { document.getElementById('Div1').style.display = 'block'; document.getElementById('Div2').style.display = 'none'; } } } 
 #Div1 { display:none; } #Div1 { background: red; } #Div2 { background: green; } #Div1, #Div2 { width: 50px; height:50px; } 
 

No agregue el evento click a través de html. Agregue un detector de eventos como document.getElementById ("Button1").addEventListener ("click", switchVisible, false);

Vea el trabajo jsFiddle aquí: http://jsfiddle.net/bevanr01/gmkconLw/

  function switchVisible() { var div1=document.getElementById('Div1'); var div2=document.getElementById('Div2'); if (div1 !== undefined && div2 !== undefined) { div1.style.display = div2.style.display === '' ? 'none' : div2.style.display === 'none' ? 'none' : 'block'; div2.style.display = div1.style.display === 'block' ? 'none' : 'block'; } } 
 #Div1{ display: block; background: blue; } #Div2 { display: none; background: red; } .divs { width: 50px; height: 50px; border: 1px solid #000; }