1
votes

Le curseur Javascript automatique ne se répète pas sur mon site Tumblr

J'utilise le code de curseur automatique de l'école w3 sur ma page Tumblr. Maintenant, j'ai regardé haut et bas ici et j'ai vu plusieurs personnes avoir des problèmes similaires avec ce même code, mais je n'ai malheureusement trouvé aucune solution. Lors du chargement, il parcourra les 3 diapositives puis disparaîtra, laissant simplement les points derrière. Vous pouvez voir sur http://rachelmontano.com

Je suis assez sûr que le problème vient du javascript et non du CSS ou du HTML - j'ai vérifié que toutes mes classes correspondent et je n'ai pas de bits aléatoires / inutiles de HTML flottant ou quoi que ce soit . Aucune erreur lors de l'inspection jusqu'à ce qu'il termine le cycle et disparaisse. Une fois que cela se produit, c'est l'erreur que j'obtiens, mais je n'ai aucune idée de comment déchiffrer ce lol >> Je suis un noob JS, je suis désolé <<

<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("slips");
  var dots = document.getElementsByClassName("bottomdots");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" activedot", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " activedot";
  setTimeout(showSlides, 3000); // Change image every 2 seconds
}
</script>

Voici l'extrait JS

Uncaught TypeError: Cannot read property 'style' of undefined
    at showSlides ((index):985)

showSlides  @   (index):985
setTimeout (async)      
showSlides  @   (index):987
setTimeout (async)      
showSlides  @   (index):987
setTimeout (async)      
showSlides  @   (index):987
(anonymous) @   (index):971

edit: voici une capture d'écran du code de mon site Web juste pour que vous puissiez voir que {slideIndex = 1} est dans le code de mon site Web, mais quelque chose parvient apparemment à le supprimer une fois que vous l'avez vérifié lors de l'inspection!?!? Je n'ai même pas ...

capture d'écran


1 commentaires

Pouvez-vous ajouter votre html? J'allais faire un jsfiddle, mais j'ai aussi besoin du balisage


3 Réponses :


0
votes

code tel que trouvé dans les devTools

Vous avez manqué le slideIndex = 1 sur la ligne 12 ici. Dans la question que vous avez écrite, mais en inspectant votre site Web, j'ai remarqué qu'il n'y avait que la déclaration if sans corps. Modifiez-le en if (slideIndex > slides.length) {slideIndex = 1} . Espérons que cela fonctionnera!


3 commentaires

Alors, voici une chose étrange: il est là. J'ai copié l'extrait de code dans ma question directement à partir du code de mon site Web, et je viens de vérifier à nouveau qu'il est là et que ce code est actuellement en ligne. J'ai même essayé de le supprimer et de le réécrire pour heehaws afin de pouvoir à nouveau mettre à jour le site. Mais cela n'apparaît pas non plus dans mon inspection - idk quel genre de vaudou c'est


J'ai ajouté une capture d'écran à la fin de ma question juste pour que vous puissiez voir lol


@RMont Heureux que cela ait fonctionné!



0
votes

Après avoir commenté, je suis allé sur votre site et j'ai copié le code dont j'avais besoin et j'ai créé ce JSFIDDLE

La clé est comme le souligne Roittimi, après votre déclaration if, il n'y a pas de condition. Le seul changement nécessaire était:

  if (slideIndex > slides.length) {
      slideIndex = 1
  }

J'ai également changé quelques images pour les espaces réservés afin que vous puissiez les voir passer.


4 commentaires

C'est le problème cependant, {slideIndex = 1} EST là dans le code de mon site Web (capture d'écran ajoutée au bas de Q), mais il disparaît lorsque vous chargez réellement le site Web et vérifiez inspecter ce que je ne comprends pas du tout


@Iharby C'est cool, mon frère. Le but était d'aider l'OP. :)


Cela ressemble à un problème de cache. J'ajouterais un autre changement juste un commentaire dans le code puis utiliserais le mode incognito de chrome


La mise en cache est un vrai problème, je trouve que je dois mettre à jour mes modifications plusieurs fois pour les faire passer. Parfois, je supprime tout le modèle, je le sauvegarde et je m'assure que mon tumblr s'ouvre en tant que page vierge, puis je remets tout le code et le vérifie de cette façon.



0
votes

Je pense qu'il y a eu des interférences provenant d'autres parties du code. Le thème n'était pas le mien et Inspect a montré des erreurs concernant des parties du code du thème qui n'étaient pas liées à ce curseur. Cependant, j'ai depuis commencé à coder mon propre thème frais, j'ai laissé tomber le même code exact et tout a été résolu. Je ne pouvais toujours pas vous dire POURQUOI ces problèmes feraient disparaître complètement le corps d'une instruction if dans un extrait de code JavaScript totalement indépendant.


0 commentaires