[英]JavaScript carousel/slider error
I was working on a personal project of making a slider using pure javascript. 我当时正在从事一个使用纯JavaScript制作滑块的个人项目。 But The js code is not working.
但是js代码无法正常工作。 When I click the next button, the console shows an error that next() is not a function.
当我单击下一步按钮时,控制台显示错误消息next()不是函数。 Same with the Previous button it says prev() is not defined.
与上一个按钮相同,它表示未定义prev()。 I tried everything I could but I am not able to find the answer.
我已尽力而为,但找不到答案。 It is confusing that I have declared both the functions but on click, I receive an error that functions are not functions.
我已经声明了两个函数,但是单击时会收到一个错误,即函数不是函数,这令人困惑。
main.js:38 Uncaught TypeError: next is not a function at HTMLElement. main.js:38 Uncaught TypeError:next不是HTMLElement的函数。 (main.js:38)
(main.js:38)
JS Code: JS代码:
var next = document.getElementById("next");
var prev = document.getElementById("prev");
var ulist = document.getElementsByTagName("ul").lastChild;
var ulist1 = document.getElementsByTagName("ul").firstChild;
var slides = document.querySelectorAll("li");
for(var i=0; i<3; i++){
slides[i].style.display = 'none';
}
slides[0].classList.add("active");
document.getElementsByClassName("active")[0].style.display = "block";
function next() {
document.getElementsByClassName("active")[0].classList.add("oldActive");
document.getElementsByClassName("active")[0].classList.remove("active");
if(Object.is(document.getElementsByClassName("oldActive")[0]) , ulist){
slides[0].classList.add("active");
}
else{
document.getElementsByClassName("oldActive")[0].nextElementSibling.classList.add("active");
}
}
function prev() {
document.getElementsByClassName("active")[0].classList.add("oldActive");
document.getElementsByClassName("active")[0].classList.remove("active");
if(Object.is(document.getElementsByClassName("oldActive")[0]) , ulist1){
slides[2].classList.add("active");
}
else{
document.getElementsByClassName("oldActive")[0].previousElementSibling.classList.add("active");
}
}
next.addEventListener('click' , function() {
next();
});
prev.addEventListener('click' , function() {
prev();
});
HTML Code: HTML代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image/Content Slider with Pure JS</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head>
<body>
<header>
<h1>A Responsive Image/Content Slider</h1>
<p>It is made with HTML5, CSS3 and JavaScript</p>
</header>
<div class="left">
<h1><i class="fas fa-arrow-left" id="prev"></i></h1>
</div>
<main>
<div class="slider">
<ul class="slides" id="slidelist">
<li class="slide 1" name="slideo"><img src="images/hero_bg.jpeg" alt=""></li>
<li class="slide 2" name="slideo"><img src="images/hero_bg1.jpeg" alt=""></li>
<li class="slide 3" name="slideo"><img src="images/hero_bg1.jpeg" alt=""></li>
</ul>
</div>
</main>
<div class="right">
<h1><i class="fas fa-arrow-right" id="next"></i></h1>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
You have duplicate names of both next and prev - one as an element and later as function. 您具有next和prev的重复名称-一个作为元素,然后作为函数。 Rename one of the two to something else to avoid a naming conflict.
将两者之一重命名为其他名称,以避免命名冲突。
For instance: 例如:
var next = document.getElementById("next");
var prev = document.getElementById("prev");
to 至
var nextEl = document.getElementById("next");
var prevEl = document.getElementById("prev");
Working Fiddle : https://jsfiddle.net/o61pbg0z/ 工作小提琴: https : //jsfiddle.net/o61pbg0z/
What the issue was that the 问题是
var next = document.getElementById("next");
var prev = document.getElementById("prev");
And 和
function next() {
document.getElementsByClassName("active")[0].classList.add("oldActive");
document.getElementsByClassName("active")[0].classList.remove("active");
if(Object.is(document.getElementsByClassName("oldActive")[0]) , ulist){
slides[0].classList.add("active");
}
else{
document.getElementsByClassName("oldActive")[0].nextElementSibling.classList.add("active");
}
}
function prev() {
document.getElementsByClassName("active")[0].classList.add("oldActive");
document.getElementsByClassName("active")[0].classList.remove("active");
if(Object.is(document.getElementsByClassName("oldActive")[0]) , ulist1){
slides[2].classList.add("active");
}
else{
document.getElementsByClassName("oldActive")[0].previousElementSibling.classList.add("active");
}
}
Hence try giving both of them different names 因此,尝试给他们两个起不同的名字
Reason for failure : In JavaScript both function declaration and variable declarations are hoisted to the top of the function, if defined in a function, or the top of the global context, if outside a function. 失败原因:在JavaScript中,如果在函数中定义了函数声明和变量声明,则它们都被提升到函数的顶部;如果在函数外部,则被提升到全局上下文的顶部。 And function declaration takes precedence over variable declarations (but not over variable assignment).
并且函数声明优先于变量声明(但不优先于变量赋值)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.