为什么这会保持附录 - uck offult typeError：幻灯片不是setActive的功能吗？
我刚刚开始学习编程，并一直在尝试进行尽可能多的研究和培训。但是，我遇到了无法解决的事情。从You Tube视频复制网页时，出现错误，这使我无法使滑块正常工作。 因为我没有理解错误的依据，而且无论有多少转弯，我都无法解开它。 我放了代码，看看是否有人可以向我解释正在发生的事情。 文本编辑器中没有出现错误，当我检查搜索引擎中的代码时，出现错误。基本上，滑块不起作用，在检查搜索引擎中的代码时出现以下显示： （索引）：66 Untuff typeError：幻灯片不是功能 在setActive（（索引）：66：17） 在htmlspanelement。 （（索引）：74：21）
谢谢大家的时间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" initial-scale="1.0">
<title>Suzuki Bike Website Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="main">
<header>
<a href="#"><img src="logo.png" class="logo"></a>
<ul class="navigation">
<li><a href="#">Top Features</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<div class="content">
<h2>Ready To <span>Race</span></h2>
<a href="#" class="btn">Ride Now</a>
<img src="DL1050RC_M2_BT1_Right_2400x1500.png" class="bike">
</div>
<!--Slider Content-->
<div class="slider">
<div class="slides active">
<h2><span>Engine</span><br>1037 cc</h2>
<h2><span>Power</span><br>107.3 HP</h2>
</div>
<div class="slides">
<h2><span>Fuel Tank</span><br>20L</h2>
<h2><span>Transmition</span><br>6 speed</h2>
</div>
<div class="slides">
<h2><span>Weight</span><br>247 Kg</h2>
<h2><span>SIRS</span><br>ABS</h2>
</div>
</div>
<div class="footer">
<ul class="sci">
<li><a href="#"><ion-icon name="logo-facebook"></ion-icon></a></li>
<li><a href="#"><ion-icon name="logo-twitter"></ion-icon></a></li>
<li><a href="#"><ion-icon name="logo-instagram"></ion-icon></a></li>
</ul>
<div class="dots">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
</section>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<script>
const slides = document.querySelectorAll('.slides');
const dots = document.querySelectorAll('.dot');
function setActive(i){
for(slide of slides)
slide.classList.remove('active');
slides(i).classList.add('active');
for(dot of dots)
dot.classList.remove('active');
dots(i).classList.add('active');
}
for(let j =0; j<dots.length; j++){
dots[j].addEventListener('click', function(){
setActive(j)
})
}
</script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
}
:root
{
--black: #2f2f2f;
--white: #fff;
--red: #f83038;
}
.main
{
position: relative;
min-height: 100vh;
background: linear-gradient(#1c1c1c, #323232);
padding: 30px 100px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main::before
{
content: "Adventure";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16vw;
font-weight: 700;
color: rgba(255, 255, 255, 0.05);
}
header
{
position: absolute;
top: 0%;
left: 0;
width: 100vh;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo
{
max-width: 80px;
}
.navigation
{
display: flex;
}
.navigation li
{
list-style: none;
}
.navigation li a
{
position: relative;
color: var(--white);
margin-left: 40px;
text-decoration: none;
transition: 0.25s;
}
.navigation li a:hover
{
color: var(--red);
}
.content
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 100px;
z-index: 1;
}
.content h2
{
font-size: 5em;
font-weight: 300;
color: var(--white);
text-align: center;
}
.content h2 span
{
font-weight: 700;
}
.btn
{
display: inline-block;
background: var(--red);
color: var(--white);
text-decoration: none;
padding: 16px 36px;
margin-top: 20px;
border-radius: 50px;
font-size: 1.25em;
transition: 0.25s;
}
.btn:hover
{
letter-spacing: 4px;
}
.bike
{
max-width: 80%;
}
.footer
{
position: absolute;
bottom: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
.sci
{
display: flex;
}
.sci li
{
list-style: none;
}
.sci li a
{
color: var(--white);
font-size: 2em;
margin-right: 20px;
transition: 0.25s;
}
.sci li a:hover
{
color: var(--red);
}
.dots
{
display: flex;
}
.dots .dot
{
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
cursor: pointer;
margin-left: 10px;
}
.dots .dot.active
{
background: var(--white);
}
.slider .slides
{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 10;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 100px;
transition: 0.25s;
opacity: 0;
pointer-events: none;
}
.slider .slides.active
{
opacity: 1;
}
.slider .slides h2
{
color: var(--white);
font-size: 3em;
}
.slider .slides h2:last-child
{
text-align: end;
}
.slider .slides h2 span
{
color: var(--red);
font-size: 0.5em;
font-weight: 400;
font-style: italic;
}
I have just started to learn programming and have been trying to do as much research and training as possible. However, I came across something that I cannot resolve. When copying a web page from a You Tube video, an error appears that prevents me from having the slider working correctly.
As I have no basis to understand the error and no matter how many turns I can't unravel it.
I put the code to see if someone can explain to me what is happening.
No error appears in the text editor, the error appears when I inspect the code in the search engine. Basically the slider doesn't work and when inspecting the code in the search engine the following appears:
(index):66 Uncaught TypeError: slides is not a function
at setActive ((index):66:17)
at HTMLSpanElement. ((index):74:21)
Thank you all for your time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" initial-scale="1.0">
<title>Suzuki Bike Website Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="main">
<header>
<a href="#"><img src="logo.png" class="logo"></a>
<ul class="navigation">
<li><a href="#">Top Features</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<div class="content">
<h2>Ready To <span>Race</span></h2>
<a href="#" class="btn">Ride Now</a>
<img src="DL1050RC_M2_BT1_Right_2400x1500.png" class="bike">
</div>
<!--Slider Content-->
<div class="slider">
<div class="slides active">
<h2><span>Engine</span><br>1037 cc</h2>
<h2><span>Power</span><br>107.3 HP</h2>
</div>
<div class="slides">
<h2><span>Fuel Tank</span><br>20L</h2>
<h2><span>Transmition</span><br>6 speed</h2>
</div>
<div class="slides">
<h2><span>Weight</span><br>247 Kg</h2>
<h2><span>SIRS</span><br>ABS</h2>
</div>
</div>
<div class="footer">
<ul class="sci">
<li><a href="#"><ion-icon name="logo-facebook"></ion-icon></a></li>
<li><a href="#"><ion-icon name="logo-twitter"></ion-icon></a></li>
<li><a href="#"><ion-icon name="logo-instagram"></ion-icon></a></li>
</ul>
<div class="dots">
<span class="dot active"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
</section>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<script>
const slides = document.querySelectorAll('.slides');
const dots = document.querySelectorAll('.dot');
function setActive(i){
for(slide of slides)
slide.classList.remove('active');
slides(i).classList.add('active');
for(dot of dots)
dot.classList.remove('active');
dots(i).classList.add('active');
}
for(let j =0; j<dots.length; j++){
dots[j].addEventListener('click', function(){
setActive(j)
})
}
</script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
}
:root
{
--black: #2f2f2f;
--white: #fff;
--red: #f83038;
}
.main
{
position: relative;
min-height: 100vh;
background: linear-gradient(#1c1c1c, #323232);
padding: 30px 100px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main::before
{
content: "Adventure";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16vw;
font-weight: 700;
color: rgba(255, 255, 255, 0.05);
}
header
{
position: absolute;
top: 0%;
left: 0;
width: 100vh;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo
{
max-width: 80px;
}
.navigation
{
display: flex;
}
.navigation li
{
list-style: none;
}
.navigation li a
{
position: relative;
color: var(--white);
margin-left: 40px;
text-decoration: none;
transition: 0.25s;
}
.navigation li a:hover
{
color: var(--red);
}
.content
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 100px;
z-index: 1;
}
.content h2
{
font-size: 5em;
font-weight: 300;
color: var(--white);
text-align: center;
}
.content h2 span
{
font-weight: 700;
}
.btn
{
display: inline-block;
background: var(--red);
color: var(--white);
text-decoration: none;
padding: 16px 36px;
margin-top: 20px;
border-radius: 50px;
font-size: 1.25em;
transition: 0.25s;
}
.btn:hover
{
letter-spacing: 4px;
}
.bike
{
max-width: 80%;
}
.footer
{
position: absolute;
bottom: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
}
.sci
{
display: flex;
}
.sci li
{
list-style: none;
}
.sci li a
{
color: var(--white);
font-size: 2em;
margin-right: 20px;
transition: 0.25s;
}
.sci li a:hover
{
color: var(--red);
}
.dots
{
display: flex;
}
.dots .dot
{
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
cursor: pointer;
margin-left: 10px;
}
.dots .dot.active
{
background: var(--white);
}
.slider .slides
{
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 10;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 100px;
transition: 0.25s;
opacity: 0;
pointer-events: none;
}
.slider .slides.active
{
opacity: 1;
}
.slider .slides h2
{
color: var(--white);
font-size: 3em;
}
.slider .slides h2:last-child
{
text-align: end;
}
.slider .slides h2 span
{
color: var(--red);
font-size: 0.5em;
font-weight: 400;
font-style: italic;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
问题是以下行：
slide（i）.classlist.add（'active'）;幻灯片不是一个函数，但您正在调用它。试试看：
slide.classlist.add（'active'）;>The problem is this line:
slides(i).classList.add('active');slidesis not a function, but you are calling it.Try this instead:
slides.classList.add('active');