我目前正在练习一个javascript项目，在这个项目中，一个人可以循环浏览数组中设置的几个配置文件。据我所知，我的代码是正确的，但当我进入控制台时，我收到了多个未捕获的错误，我不知道如何修复我需要修复的内容，以便它以我想要的方式过渡到每一个错误。我已附上我的代码
//local data
const goats = [
{
id:1,
player: "Lebron James",
position: "SF",
img: "https://www.google.com/search?q=lebron+james&rlz=1C5CHFA_enUS854US866&sxsrf=ALiCzsYNGc8IjrKMKJxcHRFPNhMhfW3LuQ:1658756349865&tbm=isch&source=iu&ictx=1&vet=1&fir=lSggYxaBapjIUM%252Cz-ZwiWHhXouBBM%252C_%253B4fGW2sEjnd8q1M%252CQy9Jh9pYLr__TM%252C_%253BGf_LIq946ZWVMM%252CAqFKpNGYkd0JQM%252C_%253BxqLaF7pWdlPRsM%252CsSJdlzEAFQrJvM%252C_&usg=AI4_-kSn2Xh3Za950B_ne-eCha23VbkLWQ&sa=X&ved=2ahUKEwiPkYL4lJT5AhWGEGIAHfsxA_sQ_h16BAgiEAE#imgrc=4fGW2sEjnd8q1M",
text: "4x NBA Champion, 4x MVP, 18x All-Star",
},
{
id:2,
player: "Kareem Abdul-Jabbar",
position: "C",
img: "https://www.google.com/search?q=kareem+abdul+jabbar&client=safari&rls=en&sxsrf=ALiCzsZy9Ol4hFucKlZsm3aIkM84uPppmg:1658507981371&tbm=isch&source=iu&ictx=1&vet=1&fir=n6jC4Jwu4JAg9M%252CYtVZWBsaYktD3M%252C_%253BXfISOrRzPCTGnM%252CsCRgJqzggzP-0M%252C_%253BKYZZFDaWarQtsM%252CIc_jRlXUPaKr_M%252C_%253Bd4EbvMdVRKruwM%252CJPX3SmHl2zdobM%252C_&usg=AI4_-kQ5jLwAjTEXv6jVvg3ATF79674rGQ&sa=X&ved=2ahUKEwivqtjY94z5AhVIFFkFHdLsBL4Q_h16BAglEAE#imgrc=d4EbvMdVRKruwM",
text: "6x NBA Champion, 6x MVP, 19x All-Star",
},
{
id:3,
player: "Kobe Bryant",
position: "SG",
img: "https://www.google.com/search?q=kobe+bryant&client=safari&rls=en&sxsrf=ALiCzsZwSZQt2iV1TRy9j3hRKqk6ZGjNUw:1658508123200&tbm=isch&source=iu&ictx=1&vet=1&fir=VI7Msn9xX9e5mM%252CTYvwsOXKOaxgXM%252C_%253Be8Ojylm8xplGLM%252CXDuPE2LrNfqFOM%252C_%253Bj22Zt04K2mGDsM%252C1WEx2wkoRouqGM%252C_%253BFMMgVzOaDwsJBM%252C3_7Nb2A2-pGJNM%252C_&usg=AI4_-kQO-g7DTHUysQihmkaLwlUiZXFRBw&sa=X&ved=2ahUKEwje8qic-Iz5AhWyM1kFHcTkCnAQ_h16BAgzEAE#imgrc=VI7Msn9xX9e5mM",
text: "5x NBA Champion, 1x MVP, 18x All-Star",
}
];
//select items
const img = document.getElementById("person-img");
const player = document.getElementById("player");
const position = document.getElementById("position");
const info = document.getElementById("info");
const prevBtn = document.querySelector(".prev-btn");
const nextBtn = document.querySelector(".next-btn");
const randomBtn = document.querySelector(".random-btn");
//set starting item
let currentItem = 3;
//load initial item
window.addEventListener("DOMContentLoaded", function () {
showPerson();
});
//show person based on item
function showPerson(person){
const item = goats[person];
img.src = item.img;
player.textContent = item.player;
position.textContent = item.position;
info.textContent = item.text;
};
//show next person
nextBtn.addEventListener('click', function(){
currentItem++;
if(currentItem > goats.length - 1) {
currentItem = 0;
}
showPerson();
});
nextBtn.addEventListener('click', function(){
currentItem--;
if(currentItem < 0) {
currentItem = goats.length - 1;
}
showPerson();
});
//show random person
randomBtn.addEventListener('click', function(){
currentItem = Math.floor(Math.random() * goats.length)
console.log(currentItem);
showPerson();
});.title{
text-align: center;
padding-bottom: 0;
margin-top: 0px;
margin-bottom: 0px;
}
.underline{
background-color: black;
width: 8%;
margin-left: 560px;
height: 5px;
margin-top: 0%
}
.review{
border: 3px rgb(0, 0, 0) solid;
display: block;
padding: 9px;
border-radius: 40px;
width: 600px;
margin-left: 300px;
background-color: aliceblue;
}
.img-container{
display: flex;
justify-content: center;
padding-top: 5vh;
}
.img-container img{
border-radius: 20%;
height: 130px;
width: 130px;
}
#player{
text-align: center;
}
#position{
text-align: center;
}
#info{
text-align: center
}
.button-container2{
text-align: center;
}
.prev-btn{
background-color: transparent;
border:none;
}
.next-btn{
background-color: transparent;
border:none;
}
.random-btn{
position: relative;
left:255px;
top: 8px;
background-color: transparent;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="/index.css">
<script src="https://kit.fontawesome.com/57a34a3966.js" crossorigin="anonymous"></script>
</head>
<body>
<main>
<section id="navbar">
<header>
<nav>
<ul>
<li><a href="index.html">Color Flipper</a></li>
<li><a href="counter.html">Counter</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</nav>
</header>
</section>
<section class="review-container">
<div class="title">
<h2>The GOATS</h2>
<div class="underline"></div>
</div>
<article class="review">
<div class="img-container">
<img src="mj.jpeg" id="person-img" alt="">
</div>
<h4 id="player">Michael Jordan</h4>
<p id="position">SG</p>
<p id="info">6x NBA Champion, 5x MVP, 9x All-Defensive, 14x All-Star</p>
<div class="button-container2">
<button class="next-btn">
<i class="fas fa-chevron-left"></i>
</button>
<button class="prev-btn">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<button class="random-btn">surprise me</button>
</article>
</section>
</main>
<script src="reviews.js"></script>
</body>
</html>人员从未定义。方法showPerson中有一个参数person，但在调用时不会传递任何arguments。需要将其设置为currentItem，它应该从2而不是3开始，因为数组是基于0的
//local data
const goats = [
{
id:1,
player: "Lebron James",
position: "SF",
img: "data:image/jpeg;base64,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",
text: "4x NBA Champion, 4x MVP, 18x All-Star",
},
{
id:2,
player: "Kareem Abdul-Jabbar",
position: "C",
img: "https://img.sharetv.com/people/standard/kareem_abdul-jabbar.jpg",
text: "6x NBA Champion, 6x MVP, 19x All-Star",
},
{
id:3,
player: "Kobe Bryant",
position: "SG",
img: "data:image/jpeg;base64,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",
text: "5x NBA Champion, 1x MVP, 18x All-Star",
}
];
//select items
const img = document.getElementById("person-img");
const player = document.getElementById("player");
const position = document.getElementById("position");
const info = document.getElementById("info");
const prevBtn = document.querySelector(".prev-btn");
const nextBtn = document.querySelector(".next-btn");
const randomBtn = document.querySelector(".random-btn");
//set starting item
let currentItem = 2;
//load initial item
window.addEventListener("DOMContentLoaded", function () {
showPerson(currentItem);
});
//show person based on item
function showPerson(person){
const item = goats[person];
img.src = item.img;
player.textContent = item.player;
position.textContent = item.position;
info.textContent = item.text;
};
//show next person
nextBtn.addEventListener('click', function(){
currentItem++;
if(currentItem > goats.length - 1) {
currentItem = 0;
}
showPerson(currentItem);
});
nextBtn.addEventListener('click', function(){
currentItem--;
if(currentItem < 0) {
currentItem = goats.length - 1;
}
showPerson(currentItem);
});
//show random person
randomBtn.addEventListener('click', function(){
currentItem = Math.floor(Math.random() * goats.length)
// console.log(currentItem);
showPerson(currentItem);
});.title{
text-align: center;
padding-bottom: 0;
margin-top: 0px;
margin-bottom: 0px;
}
.underline{
background-color: black;
width: 8%;
margin-left: 560px;
height: 5px;
margin-top: 0%
}
.review{
border: 3px rgb(0, 0, 0) solid;
display: block;
padding: 9px;
border-radius: 40px;
width: 600px;
margin-left: 300px;
background-color: aliceblue;
}
.img-container{
display: flex;
justify-content: center;
padding-top: 5vh;
}
.img-container img{
border-radius: 20%;
height: 130px;
width: 130px;
}
#player{
text-align: center;
}
#position{
text-align: center;
}
#info{
text-align: center
}
.button-container2{
text-align: center;
}
.prev-btn{
background-color: transparent;
border:none;
}
.next-btn{
background-color: transparent;
border:none;
}
.random-btn{
position: relative;
left:255px;
top: 8px;
background-color: transparent;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="/index.css">
<script src="https://kit.fontawesome.com/57a34a3966.js" crossorigin="anonymous"></script>
</head>
<body>
<main>
<section id="navbar">
<header>
<nav>
<ul>
<li><a href="index.html">Color Flipper</a></li>
<li><a href="counter.html">Counter</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</nav>
</header>
</section>
<section class="review-container">
<div class="title">
<h2>The GOATS</h2>
<div class="underline"></div>
</div>
<article class="review">
<div class="img-container">
<img src="mj.jpeg" id="person-img" alt="">
</div>
<h4 id="player">Michael Jordan</h4>
<p id="position">SG</p>
<p id="info">6x NBA Champion, 5x MVP, 9x All-Defensive, 14x All-Star</p>
<div class="button-container2">
<button class="next-btn">
<i class="fas fa-chevron-left"></i>
</button>
<button class="prev-btn">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<button class="random-btn">surprise me</button>
</article>
</section>
</main>
<script src="reviews.js"></script>
</body>
</html>您的showPerson函数不应带有参数。它应该只使用您使用按钮修改的currentItem变量。
function showPerson() {
const item = goats[currentItem]; // <-- Access the global index
// ...
此外，您没有将侦听器添加到上一个按钮中。currentItem的减量应附加到prevBtn。另外，我会用currentIndex重命名currentItem，因为它代表一个索引。
prevBtn.addEventListener('click', function() {
currentItem--;
// ...
说到索引，您的变量应该为零索引。数组的索引为零。
let currentItem = 2; // Item #3 (or index 2)
工作示例
// Local data
const goats = [{
id: 0,
player: "Michael Jordan",
position: "SG",
img: "https://google.com/search?tbm=isch&q=michael+jordan",
text: "6x NBA Champion, 5x MVP, 14x All-Star",
}, {
id: 1,
player: "Lebron James",
position: "SF",
img: "https://google.com/search?tbm=isch&q=lebron+james",
text: "4x NBA Champion, 4x MVP, 18x All-Star",
}, {
id: 2,
player: "Kareem Abdul-Jabbar",
position: "C",
img: "https://google.com/search?tbm=isch&q=kareem+abdul+jabbar",
text: "6x NBA Champion, 6x MVP, 19x All-Star",
}, {
id: 3,
player: "Kobe Bryant",
position: "SG",
img: "https://google.com/search?tbm=isch&q=kobe+bryant",
text: "5x NBA Champion, 1x MVP, 18x All-Star",
}];
//select items
const img = document.getElementById("person-img");
const player = document.getElementById("player");
const position = document.getElementById("position");
const info = document.getElementById("info");
const prevBtn = document.querySelector(".prev-btn");
const nextBtn = document.querySelector(".next-btn");
const randomBtn = document.querySelector(".random-btn");
// Set starting item
let currentItem = 0;
// Load initial item
window.addEventListener("DOMContentLoaded", function() {
showPerson();
});
// Show person based on item
function showPerson() {
const item = goats[currentItem];
img.src = item.img;
player.textContent = item.player;
position.textContent = item.position;
info.textContent = item.text;
};
// Show next person
nextBtn.addEventListener('click', function() {
currentItem++;
if (currentItem > goats.length - 1) {
currentItem = 0;
}
showPerson();
});
// Show prev person
prevBtn.addEventListener('click', function() {
currentItem--;
if (currentItem < 0) {
currentItem = goats.length - 1;
}
showPerson();
});
// Show random person
randomBtn.addEventListener('click', function() {
currentItem = Math.floor(Math.random() * goats.length)
console.log(currentItem);
showPerson();
});button {
cursor: pointer;
}
.title {
text-align: center;
padding-bottom: 0;
margin-top: 0px;
margin-bottom: 0px;
}
.underline {
background-color: black;
width: 8%;
margin-left: 560px;
height: 5px;
margin-top: 0%
}
.review {
border: 3px rgb(0, 0, 0) solid;
display: block;
padding: 9px;
border-radius: 40px;
width: 600px;
margin-left: 300px;
background-color: aliceblue;
}
.img-container {
display: flex;
justify-content: center;
padding-top: 5vh;
}
.img-container img {
border-radius: 20%;
height: 130px;
width: 130px;
}
#player,
#position,
#info {
text-align: center
}
.button-container2 {
text-align: center;
}
.prev-btn,
.next-btn {
background-color: transparent;
border: none;
}
.random-btn {
position: relative;
left: 255px;
top: 8px;
background-color: transparent;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="/index.css">
<script src="https://kit.fontawesome.com/57a34a3966.js" crossorigin="anonymous"></script>
</head>
<body>
<main>
<section id="navbar">
<header>
<nav>
<ul>
<li><a href="index.html">Color Flipper</a></li>
<li><a href="counter.html">Counter</a></li>
<li><a href="#">Project 3</a></li>
</ul>
</nav>
</header>
</section>
<section class="review-container">
<div class="title">
<h2>The GOATS</h2>
<div class="underline"></div>
</div>
<article class="review">
<div class="img-container">
<img src="" id="person-img" alt="">
</div>
<h4 id="player">PLAYER</h4>
<p id="position">POSITION</p>
<p id="info">INFO</p>
<div class="button-container2">
<button class="prev-btn">
<i class="fas fa-chevron-left"></i>
</button>
<button class="next-btn">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<button class="random-btn">surprise me</button>
</article>
</section>
</main>
<script src="reviews.js"></script>
</body>
</html>