JavaScript球员资料数组循环切换项目报错求助

安全阿岳

2026-8-24

NBA球员资料切换项目错误修复方案

我正在开发一个可循环切换数组内NBA球员资料的JavaScript练习项目，自认为代码逻辑正确，但运行时控制台出现多个未捕获错误，无法实现预期的资料切换效果，现附上完整的HTML、CSS及JavaScript代码，寻求问题修复方案。

原始代码

HTML

<!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>

CSS

.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;
}

JavaScript

//local data
const goats = [
    {
        id:1, 
        player: "Lebron James",
        position: "SF",
        img: "https://www.google.com/search?q=lebron+james&amp;rlz=1C5CHFA_enUS854US866&amp;sxsrf=ALiCzsYNGc8IjrKMKJxcHRFPNhMhfW3LuQ:1658756349865&amp;tbm=isch&amp;source=iu&amp;ictx=1&amp;vet=1&amp;fir=lSggYxaBapjIUM%252Cz-ZwiWHhXouBBM%252C_%253B4fGW2sEjnd8q1M%252CQy9Jh9pYLr__TM%252C_%253BGf_LIq946ZWVMM%252CAqFKpNGYkd0JQM%252C_%253BxqLaF7pWdlPRsM%252CsSJdlzEAFQrJvM%252C_&amp;usg=AI4_-kSn2Xh3Za950B_ne-eCha23VbkLWQ&amp;sa=X&amp;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&amp;client=safari&amp;rls=en&amp;sxsrf=ALiCzsZy9Ol4hFucKlZsm3aIkM84uPppmg:1658507981371&amp;tbm=isch&amp;source=iu&amp;ictx=1&amp;vet=1&amp;fir=n6jC4Jwu4JAg9M%252CYtVZWBsaYktD3M%252C_%253BXfISOrRzPCTGnM%252CsCRgJqzggzP-0M%252C_%253BKYZZFDaWarQtsM%252CIc_jRlXUPaKr_M%252C_%253Bd4EbvMdVRKruwM%252CJPX3SmHl2zdobM%252C_&amp;usg=AI4_-kQ5jLwAjTEXv6jVvg3ATF79674rGQ&amp;sa=X&amp;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&amp;client=safari&amp;rls=en&amp;sxsrf=ALiCzsZwSZQt2iV1TRy9j3hRKqk6ZGjNUw:1658508123200&amp;tbm=isch&amp;source=iu&amp;ictx=1&amp;vet=1&amp;fir=VI7Msn9xX9e5mM%252CTYvwsOXKOaxgXM%252C_%253Be8Ojylm8xplGLM%252CXDuPE2LrNfqFOM%252C_%253Bj22Zt04K2mGDsM%252C1WEx2wkoRouqGM%252C_%253BFMMgVzOaDwsJBM%252C3_7Nb2A2-pGJNM%252C_&amp;usg=AI4_-kQO-g7DTHUysQihmkaLwlUiZXFRBw&amp;sa=X&amp;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();
});

问题分析与修复步骤

1. 初始索引越界

数组索引从0开始，goats数组有3个元素，最大索引是2，但你把currentItem初始设为3，直接导致页面加载时goats[3]为undefined，触发错误。
修复：把currentItem初始值改为2（对应第三个球员）或0（对应第一个球员）。

2. `showPerson`函数调用缺少参数

showPerson函数需要接收一个索引参数，但所有调用showPerson()的地方都没传参，导致函数内person为undefined，进而goats[undefined]出错。
修复：所有调用处改为showPerson(currentItem)。

3. 按钮事件绑定错误

你把上一页按钮的逻辑绑定到了nextBtn上，两个nextBtn.click事件，导致点击下一页按钮时同时执行增减索引的逻辑，完全混乱。
修复：把第二个事件绑定改为prevBtn.addEventListener。

4. 图片URL无效

你用的是Google图片搜索页面的链接，不是直接的图片资源URL，浏览器无法加载这些图片。
修复：替换为直接的图片URL（比如可以用免费图床的链接，或者本地图片）。

5. CSS固定值导致布局问题

.underline和.review的margin-left用了固定像素值，在不同屏幕尺寸下会错位，建议用margin: 0 auto实现居中。

修复后的完整代码

HTML（优化中文显示）

<!DOCTYPE html>
<html lang="zh-CN">
<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>NBA传奇球员展示</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">颜色切换器</a></li>
                                    <li><a href="counter.html">计数器</a></li>
                                    <li><a href="#">项目3</a></li>
                            </ul>
                        </nav>
                    </header>
        </section>
        <section class="review-container">
            <div class="title">
                <h2>传奇球星</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">随机切换</button>
            </article>
        </section>
    </main>
    <script src="reviews.js"></script>
</body>
</html>

CSS（修复居中与交互）

.title{
    text-align: center;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.underline{
    background-color: black;
    width: 8%;
    margin: 0 auto;
    height: 5px;
    margin-top: 0;
}

.review{
    border: 3px rgb(0, 0, 0) solid;
    padding: 9px;
    border-radius: 40px;
    width: 600px;
    margin: 0 auto;
    background-color: aliceblue;
}

.img-container{
    display: flex;
    justify-content: center;
    padding-top: 5vh;
}

.img-container img{
    border-radius: 20%;
    height: 130px;
    width: 130px;
    object-fit: cover;
}

#player{
    text-align: center;
}

#position{
    text-align: center;
}

#info{
    text-align: center
}

.button-container2{
    text-align: center;
}

.prev-btn, .next-btn{
    background-color: transparent;
    border:none;
    cursor: pointer;
    font-size: 1.2rem;
}

.random-btn{
    display: block;
    margin: 10px auto 0;
    background-color: transparent;
    border: 1px solid #000;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

JavaScript（修复核心逻辑）

// 本地数据
const goats = [
    {
        id:1, 
        player: "勒布朗·詹姆斯",
        position: "小前锋（SF）",
        img: "https://images.unsplash.com/photo-1593504049359-74330189a345?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bGVicm9uJTIwamFtZXN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60",
        text: "4次NBA总冠军，4次常规赛MVP，18次入选全明星",
    },
    {
        id:2,
        player: "卡里姆·阿卜杜尔-贾巴尔",
        position: "中锋（C）",
        img: "https://images.unsplash.com/photo-1613679074704-149332f18503?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8a2FyZWVtJTIwYWJkdWwtamFiYmFyfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60",
        text: "6次NBA总冠军，6次常规赛MVP，19次入选全明星",
    },
    {
        id:3,
        player: "科比·布莱恩特",
        position: "得分后卫（SG）",
        img: "https://images.unsplash.com/photo-1587300003388-59208cc962cb?ixlib=rb-4.0.3&ixid=M3wxMjA3

JavaScript球员资料数组循环切换项目报错求助

原始代码 #

HTML #

CSS #

JavaScript #

问题分析与修复步骤 #

1. 初始索引越界 #

2. showPerson函数调用缺少参数 #

3. 按钮事件绑定错误 #

4. 图片URL无效 #

5. CSS固定值导致布局问题 #

修复后的完整代码 #

HTML（优化中文显示） #

CSS（修复居中与交互） #

JavaScript（修复核心逻辑） #