javascript - 如何在html上添加javascript函数？

Question

我不知道我的代码有什么问题。我无法在 javascript 中传递函数，[我不想将其内联]

我的问题是我的上一个按钮和下一个按钮不起作用，我还尝试在上一个和下一个上设置 return false 以停止刷新页面，但点击时它仍然刷新。

这是我的代码[另请参阅我的评论]和我的 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
    }

修复演示将非常感激:)

Answer 1

当您使用 document.getElementsByClassName('prev').onclick 时，您会得到一个数组。像下面这样使用它

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