1
votes

Donner à un bouton la même fonctionnalité qu'un autre bouton en utilisant javascript

J'ai travaillé sur un curseur lisse, maintenant je veux avoir des flèches personnalisées et pour ce faire, j'utilise la méthode par défaut de slick qui a prevArrow: et nextArrow: et ces boutons (qui fonctionnent) sont à l'intérieur du curseur slick , mais je ne veux pas cela, j'ai donc ajouté un autre bouton précédent et suivant en dehors du conteneur slick-slider et pour donner à ces boutons la fonctionnalité de ceux par défaut Im utilisant javascript. Pendant le processus, il y a une erreur avec la partie javascript qui renvoie cette erreur "Impossible de lire la propriété 'click' de null à HTMLButtonElement". Comment cette erreur peut-elle être corrigée?

html

     <div class="mates">
         <button class="prev-g" id="prev-gg">prev</button>
         <button class="next-g" id="next-gg">next</button>
     
         <div class="mates-container" id="mates-containerrr">
             <button class="prev-h" id="prev-hh">prev</button>
             <button class="next-h" id="next-hh">next</button>
         </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.mates-container').slick({
                infinite: true,
                speed: 450,
                slidesToShow: 1,
                slidesToScroll: 1,
                prevArrow: "<button class='prev-h' id='prev-hh'>prev</button>",
                nextArrow: "<button class='next-h' id='next-hh'>next</button>",
            }); 
        });

   </script>
   <script type="text/javascript">
       const badBtn = document.getElementById("next-hh");
       const editedBtn = document.getElementById("next-gg");

       editedBtn.addEventListener("click", function() {
           badBtn.click();
       });
   </script>

Si vous avez besoin de plus de code ou si vous avez des questions, veuillez me le faire savoir dans les commentaires:) p >

javascript jquery html css ajax

1 commentaires

Les identifiants doivent être uniques, n'utilisez pas les mêmes dans le curseur et les autres html

3 Réponses :

2
votes

Vous interrogez le document pour le badBtn alors que le curseur slick ne se serait pas chargé et n'aurait peut-être pas rendu son HTML dans le DOM de la page. Vous devez envelopper votre code personnalisé après l'initialisation du curseur slick .

<script type="text/javascript">
  $(document).ready(function(){
    $('.mates-container')
      .slick({
        ...,
        init: function() {
          const badBtn = document.getElementById("next-hh");
          const editedBtn = document.getElementById("next-gg");
    
          editedBtn.addEventListener("click", function() {
          badBtn.click();
        }
      });
  });
</script>

0 commentaires

4
votes

Vous devriez mettre votre script dans $ (document) .ready (function () {...}) . Si vous mettez en dehors de la fonction prête, le script s'exécutera sans tenir compte de l'élément, qu'il soit déjà rendu ou non, c'est pourquoi il affiche l'erreur Impossible de lire la propriété 'click' de null à HTMLButtonElement

<script type="text/javascript">
    $(document).ready(function(){
        const badBtn = document.getElementById("next-hh");
        const editedBtn = document.getElementById("next-gg");
    
        editedBtn.addEventListener("click", function() {
            badBtn.click();
        });
    });
</script>

2 commentaires

Hé!! votre code a parfaitement fonctionné pour moi. désolé je suis très nouveau dans javascript

^^, je suis content que cela vous ait aidé

0
votes

Je dirais que vous devriez utiliser id, pas le nom de classe $ ('. mates-container')

0 commentaires