點擊事件未定義Javascript函數

Question

編輯：我做了一個js小提琴與答案，仍然返回未定義的函數。

我正在努力找出為什么我的函數返回未定義的原因。 我的html：

<div class="slideshow">
            <div class="slide">  
                <div class="work-info col-3">
                    <div class="block-orange">
                        <h3>Work</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi ipsum iure esse nemo facere ea, iste deserunt odit provident labore exercitationem nihil, laborum, sit vel nostrum illo ducimus possimus dolorum.</p>
                    </div>
                </div>
            </div>
            <div class="slide">
            </div>
            <div class="slide">
            </div>
            <div class="slide">
            </div>

            <div class="dot-cont">
              <div class="dot" onclick="clickChangeSlide(0)"></div>
              <div class="dot" onclick="clickChangeSlide(1)"></div>
              <div class="dot" onclick="clickChangeSlide(2)"></div>
              <div class="dot" onclick="clickChangeSlide(3)"></div>
            </div>
            <button class="arrow-button left-arrow" onclick="clickChangeSlide(i-1)">&#60;</button>
            <button class="arrow-button right-arrow" onclick="clickChangeSlide(i+1)">&#62;</button>      
    </div>

該js正在頁面底部加載。 JS：

document.addEventListener("DOMContentLoaded", function(event) {
  let i = -1;
  let time = 5000;
  let slideTimer;
  let slides = document.getElementsByClassName('slide');
  let slideDots = document.getElementsByClassName('dot');

  function clickChangeSlide(n){
    clearTimeout(slideTimer);
    changeSlide(n, true);
  }

  function changeSlide(n = i, manual = false){

    for(let j = 0; j < slides.length; j++){
      if(j == i) {
        slides[j].classList.add('prev-slide');
        slides[j].classList.remove('active-slide');
        slideDots[j].classList.remove('active-dot');
        continue; 
      }
      slideDots[j].classList.remove('active-dot');
      slides[j].classList.remove('prev-slide'); 
      slides[j].classList.remove('active-slide');
    }
    if(manual){
      if(n < 0) i = slides.length - 1
      else if(n > slides.length - 1) i = 0
      else i = n
    }else i = i < slides.length - 1 ? i+1 : 0;

    slides[i].classList.add('active-slide');
    slideDots[i].classList.add('active-dot');

    slideTimer = setTimeout(changeSlide, time);
  }

  window.onload = changeSlide();
});

我試圖刪除DomcontentLoaded，因為我認為這可能會影響到它，但沒有成功。 當我單擊按鈕時，不會觸發ClickChangeSlide。 有任何想法嗎？

Answer 1

您正在回調中定義clickChangeSlide() ，因此它的作用域在整個文檔中都不存在。

您必須在回調之外定義它，例如：

let i = -1;
let time = 5000;
let slideTimer;
let slides = document.getElementsByClassName('slide');
let slideDots = document.getElementsByClassName('dot');    
document.addEventListener("DOMContentLoaded", function(event) {
window.onload = changeSlide();
});

function clickChangeSlide(n){
    clearTimeout(slideTimer);
    changeSlide(n, true);
  }

  function changeSlide(n = i, manual = false){

    for(let j = 0; j < slides.length; j++){
      if(j == i) {
        slides[j].classList.add('prev-slide');
        slides[j].classList.remove('active-slide');
        slideDots[j].classList.remove('active-dot');
        continue; 
      }
      slideDots[j].classList.remove('active-dot');
      slides[j].classList.remove('prev-slide'); 
      slides[j].classList.remove('active-slide');
    }
    if(manual){
      if(n < 0) i = slides.length - 1
      else if(n > slides.length - 1) i = 0
      else i = n
    }else i = i < slides.length - 1 ? i+1 : 0;

    slides[i].classList.add('active-slide');
    slideDots[i].classList.add('active-dot');

    slideTimer = setTimeout(changeSlide, time);
  }

Answer 2

您的DOM嘗試訪問在DOM構建時不可用的功能，對此負責onclick=clickChangeSlide(0)... 將兩個函數changeSlide(...)和clickChangeSlide(...)放在實際DOMContentLoaded事件偵聽器的外部，以在DOM構建期間訪問這些函數。

它可能看起來像這樣：

<div class="slideshow">
    <div class="slide">  
        <div class="work-info col-3">
            <div class="block-orange">
                <h3>Work</h3>
                <p>Lorem ipsum...</p>
            </div>
        </div>
    </div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="dot-cont">
         <div class="dot" onclick="clickChangeSlide(0)"></div>
         <div class="dot" onclick="clickChangeSlide(1)"></div>
         <div class="dot" onclick="clickChangeSlide(2)"></div>
         <div class="dot" onclick="clickChangeSlide(3)"></div>
    </div>
    <button class="arrow-button left-arrow" onclick="clickChangeSlide(i-1)">&#60;</button>
    <button class="arrow-button right-arrow" onclick="clickChangeSlide(i+1)">&#62;</button>
</div>

您的JavaScript代碼應如下所示：

let i = -1;
var slideTimer;
let time = 5000;
let slides = document.getElementsByClassName('slide');
let slideDots = document.getElementsByClassName('dot');

function changeSlide(n = i, manual = false) {
    for (let j = 0; j < slides.length; j++) {
        if (j == i) {
            slides[j].classList.add('prev-slide');
            slides[j].classList.remove('active-slide');
            slideDots[j].classList.remove('active-dot');
            continue; 
        }
        slideDots[j].classList.remove('active-dot');
        slides[j].classList.remove('prev-slide'); 
        slides[j].classList.remove('active-slide');
    }
    if (manual) {
        if(n < 0) i = slides.length - 1
        else if(n > slides.length - 1) i = 0
        else i = n
    } else i = i < slides.length - 1 ? i+1 : 0;

    slides[i].classList.add('active-slide');
    slideDots[i].classList.add('active-dot');

    slideTimer = setTimeout(changeSlide, time);
};

function clickChangeSlide(n) {
    clearTimeout(slideTimer);
    changeSlide(n, true);
};

document.addEventListener("DOMContentLoaded", function(event) {
    window.onload = changeSlide();
});

您還必須更改變量i, slides, slideDots, ...因為在聲明變量之前訪問了changeSlide 。 使用<script src="javascript.js"></script>將javascript代碼加載到html代碼的頂部，否則DOM無法將任何函數初始化為div元素的onload函數。