如何在HTML上添加JavaScript函数？

Question

I don't know what's wrong with my code. I cannot pass a function in my javascript, [i don't want to put it inline]

My problem is my prev button and next button doesn't work, I also tried to put return false on prev and next to stop refreshing the page, but it still refreshing on click.

This is my code [please also see my comments] and my 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
    }

a fix demo will be much appreciated :)

Answer 1

When you use the document.getElementsByClassName('prev').onclick you got an array. Use it like below

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

Answer 2

getElementsByClassName returns a HTMLCollection. So you need to pass the relevant index to which you want to add the onclick function

document.getElementsByClassName('next')[0]

But this will attach the event only on the first element in the collection.

An more relevant example is

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))
}

As you are already using jquery you can avoid all this if you use class selector

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