11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Onclick sur plusieurs Div mais plusieurs click

Pages :
Salut à tous,
Je vous remercie d'avance de m'aider sur ce sujet qui me rend littéralement fou. J'ai eu beau chercher je ne trouve pas de réponse à cette question.
J'ai réussi à rendre un lien cliquable pour afficher une div. Mais comme j'ai plusieurs lien et plusieurs div à afficher individuellement à chaque clic, je me retrouve obligé de scripter une fonction par div. N'y a t'il pas un moyen de faire une fonction globale?? En fait j'imagine que si mais mes compétences en javascript sont limitées ????
Encore merci pour vos réponses


<a class="question" onclick="MyFunction()">Lien 1</a>
	<div class="reponse" id="reponse4">
		BlaBlaBla
	</div>


function myFunction() {
			  var x = document.getElementById("reponse1");
			  var y = document.getElementById("fleche1");
			  if (x.style.display === "block") {
				x.style.display = "none";
			  } else {
				x.style.display = "block";
			  }
			  
			  if (y.style.opacity === "0") {
				y.style.opacity = "1";
			  } else {
				y.style.opacity = "0";
			  }
			}
Essaye ça (:


  <a class="lien">LIEN 1</a>
  <div class="div"></div>

  <a class="lien">LIEN 2</a>
  <div class="div"></div>

  <a class="lien">LIEN 3</a>
  <div class="div"></div>



  .div {
  width: 100px;
  height: 100px;
  background: red;
  display: none;
}



      var lien = document.querySelectorAll('.lien');
      var div = document.querySelectorAll('.div');

    lien.forEach((element, index) => {
      element.addEventListener('click', function(){
        div[index].style.display = "block";
      });
    })

Modifié par vzytoi (19 Sep 2020 - 01:18)
Super c'est exactement ça en plus j'avais essayé queryselector mais je ne savais pas que l'on pouvais utiliser All ????

Merci beaucoup. Mais pourrais-je abuser et demander comment faire pour refermer les div au clic? Et éventuellement faire disparaitre des icônes de flèches lorsque l'on affiche le bloc. Mais bon ca c'est juste si j'oserais demander ????

Et encore une fois MERCI beaucoup
:3


  var lien = document.querySelectorAll('.lien');
  var div = document.querySelectorAll('.div');
  var fleche = document.querySelectorAll('.fleches');

  lien.forEach((element, index) => {
    element.addEventListener('click', function(){
      div[index].style.display = "block";
      fleche[index].style.display = "none";
    });
  })

  for(i = 0; i < div.length; i++) {
    div[i].addEventListener('click', function(){
      this.style.display = "none";
    });
  }
Le script reste tel quel. Il marche toujours mais le clic ne referme pas les blocs et les flèches ne disparaissent pas.
PS: je suis sur safari ca viens peut être de la? ????

Encore merci pour le temps
CubWolf a écrit :
Le script reste tel quel. Il marche toujours mais le clic ne referme pas les blocs et les flèches ne disparaissent pas.
PS: je suis sur safari ca viens peut être de la? ????

Encore merci pour le temps


Peut-être une histoire de cache, celui de safari est super chiant car on peut pas le vider facilement, essaye avec un autre navigateur. Pour le vider ce sera cmd+shift+R
Modifié par vzytoi (19 Sep 2020 - 01:45)
Non j'ai tout essayé... ):

voila mes codes (si jamais j'ai fait une erreur):

<a class="question">Titre? &nbsp;<i class="fas fa-caret-down fleche"></i></a>

<div class="reponse">
       Blablabla
</div>



<script>
		var lien = document.querySelectorAll('.question');
		var div = document.querySelectorAll('.reponse');
		var fleche = document.querySelectorAll('.fleche');

		lien.forEach((element, index) =>
		{
		element.addEventListener('click', function(){
		div[index].style.display = "block";
		fleche[index].style.display = "none";
		});
		})

  for(i = 0; i < div.length; i++) {
    div[i].addEventListener('click', function(){
      this.style.display = "none";
    });
  }
</script>


Sinon pas de prise de tête ca m'aide déjà beaucoup Smiley smile
Sur codePen la fleche ca marche si je met du texte par exemple par contre le retour en display:none ca ne marche pas pour moi. Du coup ca viens de safari?
Si le résultat est différent sur codepen et sur safari alors le problème vient de safari, je te conseille vraiment d'utiliser google chrome
Non justement sur codepen ca ne marche pas non plus la fermeture du bloc.
Mais j'utilise quand même safari.
J'avais pas comprit que quand tu parlais du retour tu parlais du retour de la flèche ...
Je l'avais simplement pas programmée (:
Le nouveau script :

var lien = document.querySelectorAll('.question');
var div = document.querySelectorAll('.reponse');
var fleche = document.querySelectorAll('.fleche');

lien.forEach((element, index) => {
  element.addEventListener('click', function(){
    div[index].style.display = "block";
    fleche[index].style.display = "none";
  });
  for(i = 0; i < div.length; i++) {
    div[i].addEventListener('click', function(){
      this.style.display = "none";
      fleche[index].style.display = "block";
    });
  }
})
Alors ce que je veux en fait c'est que lorsque je clique une seconde fois le block re-disparaisse, et la flèche réapparaisse. Car la pour moi ca ne fonctionne pas en tout cas.
???? comme ça ?


var lien = document.querySelectorAll('.question');
var div = document.querySelectorAll('.reponse');
var fleche = document.querySelectorAll('.fleche');

lien.forEach((element, index) => {
  element.addEventListener('click', function(){
    if(div[index].style.display == "block") {
      div[index].style.display = "none";
      fleche[index].style.display = "block";       
    } else {
      div[index].style.display = "block";
      fleche[index].style.display = "none"; 
    }
  });
  for(i = 0; i < div.length; i++) {
    div[i].addEventListener('click', function(){
      this.style.display = "none";
      fleche[index].style.display = "block";
    });
  }
})
Meilleure solution
NIIIIIIIICKEL
par contre la flèche ne disparais pas mais à vrai dire ce n'est pas très grave.

Merci Beaucouuuuuup Smiley biggrin
Modifié par CubWolf (19 Sep 2020 - 02:30)
Si dans ton code la flèche à bien la classe "fleche" alors ça devrait marcher ...
Bref je vais aller dormir sinon ça va être compliquer en cours demain.
Mais avant tout rappelle toi bien que c'est pas parce que vous nous avez battu au classico le 13 que vous êtes plus fort (:
Bonne nuit
Pages :
Sujet clos
Aller à