Bonjour à tous,

je tente de rendre l'élément onclick disponible sur l'élément html * textMenuNavigation *. Malgré de l'avoir inscrit à l'intérieur de l'élément, j'échoue à faire jouer mon code js pour slider. 

Ici mon code html, vous remarquerez qu'il y a les dot circles puis les textes sur lesquels je veux activer le onclick, et c'est là que ça coince :/ :

<div class="menuNavigation">

         
        <!-- The dots/circles -->
<div>
  <span class="dot" onclick="currentSlide(1)" >    </span> <span onclick="currentSlide(1)" class="textMenuNavigation"> Appetizers</span>
  <br>
  <span class="dot" onclick="currentSlide(2)"></span>   <span  onclick="currentSlide(2)" class="textMenuNavigation"> Soups </span>  
  <br>
  <span class="dot" onclick="currentSlide(3)">  </span>   <span onclick="currentSlide(3)" class="textMenuNavigation">  Beef  </span>  
  <br>
  
 
</div>
        
      </div>  

CSS, l'idée de mon CSS est principalement de séparer les dots circles des textes avec l'attribut onclick :

.menuNavigation {
 

 
 position : absolute ;
 width : 25% ;
 right : 1% ;
   top : 25% ;
 
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 20px;
  width: 20px;
  margin:3%;
  background-color: #FFFCE7;    /* #bbb;*/
  border-radius: 75%;
  display : inline-block ;
  transition: background-color 2s ease;
  
 
}

.active{
  background-color: #110000 ;
}


.dot:hover {
    background-color :  red ;

}


.textMenuNavigation {
 position : absolute; 
right : 15% ;
 text-align :  right ;
 width : 80% ;
 color : #DCC108 ;
   font-family: 'Macondo', cursive;
   margin : auto; 
   font-style: italic;
  opacity : 0.35;
  background-color : #110000  ;
  background-size : 15% ; 
 font-size : 202%;
 
}

javascript * le code consiste à gérer le passage d'un slide à un autre, retour à 1 ou x.length pour assurer la continuité du slide en cas de dépassement des extrêmes * 

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("menuSlide");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1} 
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none"; 
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block"; 
  dots[slideIndex-1].className += " active";
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("menuSlide");
  var textMenuNavigations = document.getElementsByClassName("textMenuNavigation");
  if (n > slides.length) {slideIndex = 1} 
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none"; 
  }
  for (i = 0; i < textMenuNavigations.length; i++) {
      textMenuNavigations[i].className = textMenuNavigations[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block"; 
  textMenuNavigations[slideIndex-1].className += " active";
}

Quelqu'un sait comment activer le on click sur mes éléments blocks ? 

une image pour rendre le tout plus compréhensible, je veux rendre le onclick activable sur l'ensemble des éléments dans le cercle en bleu : 

je suis ouvert à toute suggestion,

Bien à vous,

Armand

edit : 

okay ça fonctionne, j'ai découvert que l'attribut "pointer" sert justement à changer la forme du curseur, mais en fait le mécanisme fonctionnait (y), 

bien cordialement,

Armand

-
Edité par ArmandDuchatel 16 janvier 2018 à 6:45:19

Bonjour,

ravie que tu aies trouvé la solution !

je t'invite cependant à modifier ton code, à utiliser des event listeners plutôt que des onclick, afin d'avoir une vraie séparation entre HTML et JS. Un peu de lecture : https://www.alsacreations.com/article/lire/578-La-gestion-des-evenements-en-JavaScript.html

Merci Lamecarlate, 

je vais me renseigner,

salutations,

Armand

edit : 

J'ai pu tester ce code mais ça bugg pour une raison qui m'échappe...

html, ici je donne un ID à l'élément que je veux intercepter

  <span class="dot" id="dotThree" >  </span>   <span id="dotThree" class="textMenuNavigation">  Beef  </span>  

  <br>

 

js : je dis à mon code d'intercepter l'élément en question puis d'exécuter une fonction déterminer. le currentSlide est en fait un callback qui est défini ailleurs dans le code

var dotThree = document.getElementsById("dotThree")



dotThree.addEventListener("click", currentSlideThree);



currentSlideThree = function currentSlide(3) {

  showSlides(slideIndex = n);

}

 

mon code me semble logique pourtant, avec cette façon de faire mon slideshow s'effondre de manière pure et simple ... 

si quelqu'un a des suggestions je suis preneur :),

salutations, 

Armand

-
Edité par ArmandDuchatel 16 janvier 2018 à 9:58:16

Salut,

essaye de le faire en Ajax, c'est simple et rapide.

Bonjour,

c'est parce que la méthode appelée dans le addEventListener a forcément un argument "e" (pour event).

Cependant je ne reconnais pas cette formulation :

currentSlideThree = function currentSlide(3) {

(mais je suis un peu larguée en ES6).

Tu peux écrire

dotThree.addEventListener("click", function () {
  currentSlide(3); // de ce que j'ai compris de ton code
});

merci pour le retour lamecarlate, 

il s'agit effectivement de passer d'une page à l'autre à chaque clique, 

actuellement je suis sur un autre projet je fais un retour dès que possible concernant ce code-ci,

bien à vous,

Armand