Comment ajouter une fonction javascript en html?

Question

Je ne sais pas quel est le problème avec mon code. Je ne peux pas passer une fonction dans mon javascript, [je ne veux pas le mettre en ligne]

Mon problème est mon bouton prev et le bouton suivant ne fonctionne pas, j'ai aussi essayé de mettre false sur prev et à côté de arrêtez d'actualiser la page, mais elle est toujours rafraîchissante lorsque vous cliquez sur.

C'est mon code [s'il vous plaît voir aussi mes commentaires] et mon codepen:

$(document).ready(function slider() { 

     $('#img1').show('fade', 500); 
     $('#img1').delay(5000).hide("slide", { direction: 'left' }, 500); 


    }); 

    var count = 2; 
    setInterval(function loop() { 
     var all = document.getElementsByTagName('li').length; // <-- i got the li elements so i did the same to prev and next 
     $('#img' + count).show('slide', { direction: 'right' }, 500); 
     $('#img' + count).delay(5500).hide('slide', { direction: 'left' }, 500); 

     if (count === all) { 
      count = 1; 
     } else { 
      count += 1; 
     } 
    }, 6500); 

    var sliderInt = 1; 
    var sliderNext = 2; 

    document.getElementsByClassName('prev').onclick = function prev() { // <-- not working 
     console.log('clicked prev'); 
     var newSlide = sliderInt - 1; 
     showSlide(newSlide); 
     return false; 
    } 

    document.getElementsByClassName('next').onclick = function next() { // <-- not working 
     console.log('clicked next'); 
     var newSlide = sliderInt + 1; 
     showSlide(newSlide); 
     return false; 
    } 

    function stopLoop() { 
     window.clearInterval(loop()); 
    } 

    function showSlide(id) { // <-- this function doesn't work from prev and next 
     stopLoop(); // <-- I want to stop the loop() function when prev and next is clicked 
     if (id > count) { 
      id = 1; 
     } else if (id < 1) { 
      id = count; 
     } 

     $('li').hide('slide', { direction: 'left' }, 500); 
     $('#img' + id).show('slide', { direction: 'right' }, 500); 

     sliderInt = id; 
     sliderNext = id + 1; 
     window.slider(); // <-- I want to call the function slider here 
    } 

une démonstration de solution sera très appréciée :)

Answer 1

Lorsque vous utilisez le document.getElementsByClassName('prev').onclick vous avez un tableau. Utilisez-le comme ci-dessous

document.getElementsByClassName('prev')[0].onclick 
document.getElementsByClassName('next')[0].onclick 

Answer 2

getElementsByClassName renvoie une collection HTMLCollection. Donc, vous devez passer l'indice pertinent auquel vous souhaitez ajouter la fonction onclick

document.getElementsByClassName('next')[0] 

Mais ce attacherez l'événement uniquement sur le premier élément de la collection.

Un exemple plus pertinent est

var list = document.getElementsByClassName('next or prev'); 
for (var i = 0, len = list.length; i < len; i++) { 
    (function(i){ // creating closure 
list[i].addEventListener('click',function(){ 
     // code you want to execute on click of next or prev 
    } 
}(i)) 
} 

Comme vous utilisez déjà jquery, vous pouvez éviter tout cela si vous utilisez le sélecteur de classe

$('.next or .prev').on('click',function(event){ 
    // relevant code 
})