web-dev-qa-db-fra.com

Comment masquer une div et montrer une autre div en utilisant le bouton onclick?

J'ai deux div dans mon fichier html. Je veux cacher la 1ère div et montrer une autre div sur le bouton d'entrée HTML onclick event.

Voici mon code,

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;
}
<input id="Button1" type="button" value="" onclick="javascript:switchVisible();" />

Mais ça ne marche pas. Toute aide serait appréciée.

Merci.

javascriptjqueryhtmlcss
5
Arpita

1) Dans onclick, vous n’avez pas à utiliser "javascript:", c’est implicite.

2) Vous recherchez "display: block", je vérifie toujours "display: none" (car l'affichage peut également être "inline-block", etc.)

Essaye ça:

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 id="Div1">Div 1</div>
<div id="Div2">Div 2</div>

<input id="Button1" type="button" value="Click" onclick="switchVisible();"/>

9
Philip

Comme il est tagué avec jQuery, voici la réponse simple à jQuery

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

utilisez on pour écouter l’identifiant #Button, j’ai utilisé clic et touchstart pour le rendre compatible avec les appareils mobiles, puis toggle () qui définit l’état de l’affichage: au contraire de ce qu’il est maintenant. Donc, si elle était display: none, elle devient display: block, si elle était display: block elle devient display: none

3
Andrew Killen

Essaye ça:

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 id="Div1">Div 1</div>
<div id="Div2">Div 2</div>
<input id="Button1" type="button" value="Click me" />

Cependant, cette approche peut être meilleure:

var wrapper = document.getElementById('wrapper');
function switchVisible() {
  wrapper.classList.toggle('switched');
}
document.getElementById('Button1').addEventListener('click', switchVisible);
#wrapper > :last-child {
  display: none;
}
#wrapper.switched > :last-child {
  display: block;
}
#wrapper.switched > :first-child {
  display: none;
}
<div id="wrapper">
  <div>Div 1</div>
  <div>Div 2</div>
</div>
<input id="Button1" type="button" value="Click me" />

1
Oriol

vous voudrez peut-être essayer ceci ..

    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;
}
<input id="Button1" type="button" value="Hide" onclick="switchVisible();" />

<div id="Div1" class="divs"> </div>
<div id="Div2" class="divs"> </div>

1
Wracker

N'ajoutez pas l'événement click via html. Ajouter un écouteur d'événement comme document.getElementById ("Button1").addEventListener ("click", switchVisible, false);

Voir travail jsFiddle ici: http://jsfiddle.net/bevanr01/gmkconLw/

0
Russell Bevan

Vous avez probablement des erreurs de syntaxe dans votre code. Celui-ci fonctionne:

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;
}
<div id="Div1"></div>
<div id="Div2"></div>
<input id="Button1" type="button" value="" onclick="javascript:switchVisible();" />

0
Alex Char