编辑：我用答案返回js fiddle，但仍然返回未定义的函数。
我正在努力找出为什么我的函数返回未定义的原因。 我的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)"><</button>
<button class="arrow-button right-arrow" onclick="clickChangeSlide(i+1)">></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。 有任何想法吗？
答案 0 :(得分：0)
您正在回调中定义<div id="details-container" class="style-scope ytd-channel-about-metadata-renderer">
<yt-formatted-string class="subheadline style-scope ytd-channel-about-metadata-renderer">Details</yt-formatted-string>
<table class="style-scope ytd-channel-about-metadata-renderer">
<tbody class="style-scope ytd-channel-about-metadata-renderer">
<tr class="style-scope ytd-channel-about-metadata-renderer">
<td class="label style-scope ytd-channel-about-metadata-renderer">
<yt-formatted-string class="style-scope ytd-channel-about-metadata-renderer"></yt-formatted-string>
</td>
<td class="style-scope ytd-channel-about-metadata-renderer">
<ytd-button-renderer align-by-text="" class="style-scope ytd-channel-about-metadata-renderer" button-renderer=""></ytd-button-renderer>
<div id="captcha-container" class="style-scope ytd-channel-about-metadata-renderer"></div>
<div id="email-container" class="style-scope ytd-channel-about-metadata-renderer"></div>
<a id="email" target="_blank" class="style-scope ytd-channel-about-metadata-renderer" href="mailto:undefined" hidden=""></a>
</td>
</tr>
<tr class="style-scope ytd-channel-about-metadata-renderer">
<td class="label style-scope ytd-channel-about-metadata-renderer">
<yt-formatted-string class="style-scope ytd-channel-about-metadata-renderer"><span class="deemphasize style-scope yt-formatted-string"> Location: </span></yt-formatted-string>
</td>
<td class="style-scope ytd-channel-about-metadata-renderer">
<yt-formatted-string class="style-scope ytd-channel-about-metadata-renderer">YourCountry</yt-formatted-string>
</td>
</tr>
</tbody>
</table>
</div>，因此在整个文档中都不存在它的作用域。
您必须在回调之外定义它，例如：
clickChangeSlide()答案 1 :(得分：0)
您的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)"><</button>
<button class="arrow-button right-arrow" onclick="clickChangeSlide(i+1)">></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函数。