Home > OS >  Javascript project wont cycle through array list
Javascript project wont cycle through array list

Time：07-26

currently practicing with a javascript project where a person would be able to cycle through a few profiles that have been set up in an array. From what i can see my code is correct but when I go to the console I receive multiple uncaught errors and Im not sure how to fix what i need to fix for it to transition through each one the way I want. I have attached my code

//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%2Cz-ZwiWHhXouBBM%2C_%3B4fGW2sEjnd8q1M%2CQy9Jh9pYLr__TM%2C_%3BGf_LIq946ZWVMM%2CAqFKpNGYkd0JQM%2C_%3BxqLaF7pWdlPRsM%2CsSJdlzEAFQrJvM%2C_&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%2CYtVZWBsaYktD3M%2C_%3BXfISOrRzPCTGnM%2CsCRgJqzggzP-0M%2C_%3BKYZZFDaWarQtsM%2CIc_jRlXUPaKr_M%2C_%3Bd4EbvMdVRKruwM%2CJPX3SmHl2zdobM%2C_&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%2CTYvwsOXKOaxgXM%2C_%3Be8Ojylm8xplGLM%2CXDuPE2LrNfqFOM%2C_%3Bj22Zt04K2mGDsM%2C1WEx2wkoRouqGM%2C_%3BFMMgVzOaDwsJBM%2C3_7Nb2A2-pGJNM%2C_&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 >
            <div >
                <h2>The GOATS</h2>
                <div ></div>
            </div>
            <article >
                <div >
                    <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 >
                    <button >
                        <i ></i>
                    </button>
                    <button >
                            <i ></i>
                        </button>
                </div>
                <button >surprise me</button>
            </article>

        </section>
    </main>
    <script src="reviews.js"></script>
</body>
</html>

CodePudding user response：

person is never defined. you have a parameter person in your method showPerson but when calling you don't pass any arguements. need to set it to currentItem which should start at 2 not 3 as arrays are 0 based

//local data
const goats = [
    {
        id:1, 
        player: "Lebron James",
        position: "SF",
        img: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxITEhUSEhIVFRUVFxUVFRcVFRUVFRYVFRUWFxUVFRUYHSggGBolGxUVIT0hJSktLi4uFx8zODMtNygtLisBCgoKDg0OGhAQFy0lHR0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLy0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIAKgBLAMBIgACEQEDEQH/xAAcAAABBAMBAAAAAAAAAAAAAAADAAIEBgEFBwj/xABHEAACAQMCAwYEAgYGBwkBAAABAgMABBESIQUxQQYTIlFhcQcUgZEyoSNCUnKxwSRigpLR8BUWM3OTorI0U2N0wsPS4fEI/8QAGwEAAgMBAQEAAAAAAAAAAAAAAAECAwQFBgf/xAAzEQACAQMDAQUHAwQDAAAAAAAAAQIDESEEEjFBBSJRYYETcZGhsdHwFDLBBiNS4SRCYv/aAAwDAQACEQMRAD8A4xEKOFoUJo2amIwRTSKcaaaAMkU5Ep8IqWsYobsMh93RbSPDb1LENOEVQcsEoXjJS8DZs66Kr9xFk7VP7ul3VRpx29TbrdbLUpJxSsasw1juq6/2f D7TwrLPcGIuAQioGIB5aiTzqr9s xcvDpFV2Ekb50SAYyRzVh0NT3owbSld3Qpa2ckda 5FSvcRHzTo6YTToqBjpKjGpUg2oAQk4AJJ2AHMk8hQIYtOq cP HkigNdeEnfQTjAPLON8/arDZ9iLdhp0x9OYOfv1qDqRRJQk1dI5KKzrrqvFvhE7RtJaupYDITJ325DPWuWXdlLG5jkRkZeYYYNTTuRsNL0ysiJvKniFvKmAzTTGWjrE1ZMBoEYiWnSJT44zTjAajZ3HcjBKG6VN WNYa0PnUgIOKyBUv5I dOWy9aAGIdqfZRBnxRBaetGsoQrg1HaPcWi37OKyg4rB7Lr5Vs7HiahAM0Y8VTzqxUyLuauPsuvlRv9V08qnf6ZTzoZ40vnT9nFELNnM4hRBQIzRxVZYKmE04mhk0BYkxviiRXW Kis21BjODmkySTLFFvRglayC5wKw/EcVXYd0HupsGpFuNQrRz3eTWx4VM7sscal3Y4VVGSev2xk56AE1PbgjfJ3fsz8TrUQIl0WjkQBSQjOrYGNQ0gkZ8jVO JnbKK MccAPdxktqYadTEY2B3AxQeD9jkLAXEhJO mM4QD s5GT9APerzFw BU7pIoio20lQy 51ZrNKrCPU0RozfQ4fOK1lwmRsc12a9tHjYlYozp8WlY4xkDouB1xUfi3BYrv/ah8MveRlNIdDjcJkYI/q8jtyODUo6iLE6EkcTIosC1tO0XZ2a0cCQao23ilX/ZyDmMHo2Oanceo3Ottzg1pTTV0UNNB22rcdkFX5gSYB7rDgHlqzsfpufpWhuXzVi7H2zqGkZCI5ANL9DoYhh6HJqFR2g2OEbySOn8SvjKdZGdW4xjbP1ocDkZ57gfx/8AqqPcdoLkONLvoIJACDQEQlPDn9UEEfStvcX8vy/ehjjIGoftfb0rBUk01jk2044d hfTfPHEzEeEDz3JOw5Vzf4gqJU YIAdWGSBzVmwQT7kH7 dQ7HtLdBmMs0pXC5VlBiKPsuseRzz51suLwPcWzJCpYuo0jIGMMucsxAAGM5J5DNaIzakjO43TOe98tWbgPYy5u4RPC0Ggsy4eQhsrsSVVTgfn6VT7iFkYowwVODggj3BGxHqNjR7HiU0OTDNJHnnodlz7gHetE9zXcav55RXHan307eXJe4vhzOMd7cQIDy0d5If7pVf40eX4dYGTejH/lm/nJzrQdlOPzPcotzPNIm5CGQ NxuqseeOe3XYeh6jFfmUfoo1UctTYAXz0J/PIrFUrVqcrSa9F9zXClSmrxT9X9inJ8NXdT3NwDINwsyd2GH7ysxU 4PuKqHHOGXNm2i5geInkSAUb9x1yrfQ112ztZY21oSSObNyPnVg cMkZjmiSRG/EjhXRvdTtU6erT5ZCppWuEeb/nPSl856V03tf8NEkzNw4BGGS9uzbH1hZuR/qE48iOVcpdSpKkEEEgggggjYgg8jmtUZqSujNKLi7NEn5z0rHzh8qiZp1TFYk/OGmm6NRs0s0gJQvn86RvX86j0qYB/nH86x82/nQM0qQGY6MDQYlouKBGTTMU6sGgAb0wmnSGhk0FkXgIsvShuc1gUaGBnZURSzMQqqoLMzHYKoG5JPSgrbGRoSQACSSAABkknkAOpr0X8I/h58lF8zcr/SpVwFOP0EZwdP756n2HnkXwr GK2YW7vFDXR3RNisGfyMnryHTzrpkslV1NsouMldPkDnHbDhvyky3KgmA5EqqM6M761H7PmOnMbcgS8UHdhoCrhs4I3GRsfscj3FQfjB287hTZ27fpnXxsCMwo302dgdsYKjfbIrkHZ3tPcWZPdMCjbtHICyE eAQQfUEdK5a0EpRxL3X8PN/R HOcvoUtZ7PEkdYivblI3kuNOMDusgKxG SQP1eXOh8P7SAGPWmhi QBv4GPiz5Dm30FVsdtIbqSJZFMbtgOzMogVgOfnpz 196l2EsEs7RLcxMxIDNrA8P7MROzfQ1DZUp3Tj cdDTvhVeH ept4uJ2080lpkNE2WEbDGrOSVTO2RuR1GxHKqH2o7JS2ZDEM0Dk93Lj/kk6K PoeY6gP7c2MUN7IkDeHCSYDZMbsMsoPMYIDDyDDyoHEu1V5NB8vLMWjyCRhQW0nK6iBvg4P03zW2nuWYvD/MGGo07qSs1 ZK1MN66R2SVRbW6SAEHXKwyQWDN4cnyxjl61zec1Y D9omEcUbjwxB0DAncM2oZHoSd/8ACr60ZSgrc/6ZTSkoye7h/dHQb3hduwLgBF6ZJwM8ycdBz lS24rw/wCWEJmQI lVbwlSV1ZGNXmxquXPHkVViwhLLzkPhwRv77ZrSWot1YOsis25w8QMT8vDjGMbVjjTbV2/kbN6Tslf1L5YcOt0QSMisCBqztv5g9Qf51DW48bJAFBOXRCMqQMEx48iBjH8qhz9qluVK6VUrz07LgCqmvHzHK0qqHCA4BJH1yN/84qUYTk2vIi6kFZ ZrO2EQW7lUKF/AdIGApaNWK46Yzpx001p6PxG knleaQ5dzk42HLAAHkAAPpUY10Iq0UvAxye6TfibbsrcW6XcL3QJhViWxq2IU6CdO5AfScDyrqvDL23kkKw3EbM6kLocFgw5MYzv8ATHSuKClWevplWabdrF1HUukrJJnb F3LRyCGS7Qyp4TFI4yQcEEKcHcYxjpVgkQAF2bu/ViAv3NecXbO53PmdzTWJO2dhy8h7VmfZ2bqdvRff7mj9e3zD5nfre9kM3dxqXcHkPpvnkBuN VVT4s9mIo1N2H/AKSzqZ44/FEqkadZPNWzpz0OrkOZgdjO2bx23ykUYjkGS0oJLyJnYb/hxnGx5csbmrRYXCyfo3ClWBDBhnVrB1A9cHJB96roRrQrWk7RXxl5 S8lno2uCutNVIbkcUBrOasHbPss9nLkAmCQkxNzx17t/wCsPzG/mBXChrrGMyTWQ1DpyLQA/VWQKYy1IQbUm7DQLFLFPPOkRRcQo6fmhJT2oY0h2aWKErUcGmIG8dRmFS5GxUUnegRK4bYSzypDEheSQhUVeZJ/gOuTsACa9J/Db4dQ8NQSy6ZLth4n5rHkbpFnkOhbmfQbVE D/YcWMHzM6/0qZc4I3hiOCI/RjzP0HTfoJaotgOkeqZ8Q 16WFsz5BlfKwIdyz4/EwyCUXIJx5gczVnuJCeVeXfiN2hN7fSuGzFGTFDg6l0IcalPkxy31HlVVt7t0GsFdvbuSaRpZXLu5LMzHJJPU0NabWRV4DjWBWQKaaAJcL4ojPmocZp2qoSjm5JMbJUuyTKn0P8RUPNS7EktpUFi22FBJPsBUiJteFcVaJ1ZT4gMK37Pp7Vvh2mvCSoEUfPUyKqnHXxA1UbqJ1bDDBz5b0LWaqlTjLJZCrOCsmbPiPFWkYnYZ2znc 5qLJgRsduWPqTQoo2Jx1NTeL8IuI41cxOYSATIFYpqyRgsNh7GpppYRXl5NLTCayDSIqYDRTqVNzQIRashqdooZFAyRaXBjdXHNTnHmORH1Ga6dwy61KGVsqwyvn5j YrliJVm7K3xXMJ9WT35lf5/es2pptrcuUW0ZJOz4Z1ewlhuoWt7hQ6MuOWCMciDnYg5IPMVybtr2VlsJdLZeF891KBsw56W8nA5j6jarrw 4JO zdD6 RxVttu6vLZrW4UMjjGM JWHJlz Eg7g/yJFFKpfkVSFuDztRI62fajgEtlcNBJvjdHAwHQk4YDpyII6EEVqwK0lY SnK1CJpymgAqCiECo vFY72gBybVhqcaHmgBE09HoRFIGgArNmup/BbsEZ5F4hcr gjOYFI2lkU/j/cU/dh6EGo/Drsi3ErtYt1hTEk7jpGD AH9puQ p3xXqKOJY1WONQqIoVFUYCqowAB0AAqMpWAMzZNClfoKwXwM/T/ABqOSWOAM/UgD3NU7 iHYqPxR7R/K2TJGT8xc5hhUAljqwJHUDfKq2xH6zLXB17FcR7symynVAQpLoY9zy2fBxvjPLNerreIDc7nnny2AwueQ25UDj7f0WfPSJz9QMj8xVi7qInlaDsbfOcLbn /H fiqy8O HyoR807seZSLCj2Mj7n6KPer/FeBcFQDgdOmfb2p/FLgOoJADf561nlqJWwjVGgr5ZX7Hh9lFkLawqRjBlQyE eTJk1Me0s2zrtLYEecSD7EDlUWa6Kjxbr67jHrTrWUAh1GRjGOZx/VNUe3lfJN0UljgIOyPD5PE9oEz w7offCtp/Kodx8JreVlS3nliYp3z96FlVIidMY8IU5Zg2OeymrFw2ZH8TnESq0jk7YjjBZz7YGPrVt4BbMsWuUYmnImlH7AIHdQ 0celfcMetU19dKjCU2/28Lxk7qK9LOTt4WzcjKnG6S6/QrXBPhdwy3IZ42uD4D mbKgr IqigDBO G1VE45M0SJGfCLUtAyqNKk7GCVsc1ePBB5Z1DnV7kO2a1vFeGpP I6X0lQwVWynMxyxt4ZYj ydxzBB3rkaLtWbbVad8ppu7S5VnZO0Wnyk7SSbTV7TlQVk0jinGQjkk861htARyFdG4p8PyclUYHo1s/eJ 81vMRIu/RHeq9ZdiLsnDkhScDTDctLjO36ExKV/tEAeddqEpSV4JteScl8Ybl6Xv5Buiufz4mh4fZKDqPmAPr5V2jsfZsgjibIYaJZF/7qNCzRK4/Vkd2zp56V35Vr z3Y0xYbHcY/WJSa7PsRmG36jw62x1FTuP8c/0eY4ooVWJ9btLK76e88pJTnVI2PxM2dtgeVVR1f8AcUYO9RXcY3XKV7yd7LbyopuUmlxazrnlWtjx xL452B4ZdgtLbIjeImSEd042yWOjZz18QNcm4p8PII5RpupDGyq kxr3gDgMq6w2CcEZOkfXnXaezHFheWyy6Cgl1qAeoyyBhtyPOueX8BYW0rHdrWAN/vIwY3/ADWo6GpWpQcJt7ozcXd3s1G9vlL4eHK2KUvI0lt8P7A/ie6PtJEv/tGjS/Dzhw5/N481liP3BhrfW3IUWeUAZNa/1E1yy50IWK0Ph1w RQIryeFzsO9WOUbHqF0Efeqr2n H15Zgy6VngG5mgyyqN95FxqTbqRj1roZv19/cA0a340Y2GkEY6AY 9XQ1LfKKZ0LdThytR4LjSQw5g5HuN66xxHs9ZSs80lmoZjlu7kePJ8winQCfIDc1o J9i7Icjcw56kpMqnyK6VbH9qr1Wg pS6Ul0JFmwdQy9VWRfYjUP8K3VpdaN84JkIB8hzx7VWuHQm3AiE6TBPwlNWdDHIDqw8JznbfpW9jCyJgbHOR6NWKV6c/I1R78fM2fa3hI4jbafD8xFlom/aI/FGT/AFgAPfB6Vw5lIJBBBBwQdiCOYI6Gu1cMvWJAwwOdyAMZHWqX8TuC6ZBexqO7mOJcclnGcnHk4GfcN6VtpTvgyyjbJRWrMVMosEeatICkFDqV3NZ7oUXGMUU0isB6aWqXQigpTNNaPFZR6ZI aJAjrH/8/wDGI0muLViFknEbx9C/dCTWmepw2oD0au5140glZGV1YqykMrKSGVgchlI3BB3zXYeyvxqKqsd/EXIwO hC6j0zJEcAn1Uj92s9RSTulcmrHZyPPl6c/wA6eCOn8Kr3Bu19hd47i7iZj ox7uT/AIb4Y/QVvDGwrN7fa8onsv1Clx61p 192qWM5OfEugcskuQo/j VbE5qk/Ey8PdwwDUckyuF54AKoD6Elj/ZpS1OMEo0copJu8N4WzuCOex9cU9uInfOf5fStfHbuemw8xindw/Ln7Csrn5myMfIdJxTpQuBXX6Ux9M5UeXmB6UGUAnSGj1gElQ6l8Dc HOa1UEpRg6oQVOck8z5Y9amk2rEXLJ1Hh8Il0xdJ5o4G6/oowbi4B9CkQT 2KvZkJJbrmqV2DPeaZcMoSF9jy7y5mIb3ZUtRv5Sjzq5kjqcAbknkB1Jrg9pV5xcIRumm5et9sflFPz3eYopOUpP3fnxEZsbZA89x fWsADp18uW9cv4bw60vLu54pPCi2cbaIl7v/tEuQC5Qf7RmY/hx4mdQckNmx8K7TyG2vppo47dbV3ijQDJQog0o G0s2pkXC4Gdq2azsepJd2pKUk4p7uFKbS2pLc7ptX22UU rwVQrLwLd3YPOibYx0qjcO49fzQRrELeS7co8g7qQQW8LKxCzyd5tKQUbSMsNxp60fhXGr6eW5iSSx/o792D3Uv6WRVzIqr8xlQp8Oreskuwa8XLvwuucvi9s929m PFXawnaXt0/EuWa0knZ/clJ5FyCuCQygEg7LsOY655k89xrf8AWK7FxFbGO27z5b5i6JMiR2532MmWGPwD655HZ/Be2XzIgVLZu/mjkl7vvFCrEjlBJ3jAFgxBwAvQ9Bmpx7K11CDlDa44btJWtlpvdZJYb92eGhe1g3k2nBoLpCrXEyvgEFVVQNWQVYMADyGMVXeLWH6G5VfxWl3KR/ubrTOMeg78f3TVp4NxEXEQlEbx5Z10yadWY3KNgqxBGpTvnfFAkQLfKHGY7yAxuOneQEjHu0Uzf8Gr9DOcK1WjVioyi4uySSVm4y4x 2d/T1FLhSj fliixTADc1pOLcTywRTuevkPOiccmNu8kbnJjdo/3ipIB oGaqsk4Lli2/P/APK6ahnJc5 BarTSBsc /Oplsc5yMtkgE8gM HH8a0FlKDzO2xzU8Pnk PvUXNokopm2k1ld m 7AZIzg88AAfxPkKHIWbPi1AnwgFT4iDkHHkBnHKoBHJWc455ILDIJxz9/yp7swAKkjHUAAZJOWIwOgG3r70lV6CdPqariPDTHIWQEAAdefnv6/wCFbDhl0ukY6/5OaFcxTNkHUw5jYH16ClaRA/vb5xtjlz /5VKc90eQgrS4Nu8u3p6UZdFzE9tJski6TsPCf1WHqCAfpUKLbmah3DMDlaKM7MlVp7kc04pYPbyvBKMPG2lscj1BB6gjBB8jWbQgCj9o73vp2fOrAC6vPSMZ9un0rXhjXXTusnMaJLSb00mgKTWTJSaGMJrGaxWRUiItVIVlqSCgZg0lokgoa0AGCitxwvtHe2 BBdzxgclWRtH9wkr VadafRzyIv3C/i3xSI5kkjuF38MsaqeW3ijCn75qPcfEy6kdnlhgdj1AkXAHIAaztVMFDNVS09KXMUTjUlHhlruO3U7coYF kjfxfH5VoeJcduZsiSU6f2VwiexVcZ uahCm4ohRpwzGKQ5VZy/dIUDlGDKcMCCCOhFdFsik0CSqOezL5ONmH8/Yiudhas3Yi7Il WztOQE9JeQ 42 i1Tqobo38PoW0ZbXZ9TuvZW17u2hXqy943uwAX7Iqj7 dan4lcSZYI7SN1SS8fuizMFVIdu9didtO6qfRmq0KgBCjkAAPYbCtNfdj7KeVp54jLI3V5ZiAMkhVXVhVGTgAYGa8jodXR/V/qdS3aLuklfjEfSOH52NNWEtm2PUq9ncQvJHbr3yi30rYQ21xZtJI2h  uJmWRlR8ajlsAAnGWYih23Zm/aCO1mtm7uS9NzdsJ4i0iHR4QQ2SdmYnY5Ckb8rzwzgFpbtrggjjbBXUq4bSSCRnn0H2raA10a39RRhL xTxz37p3zlWk/Hdl5k28FC03 TKFw xvrOe NrYsIZh/RlEluAkqLpR2QybISzttvsoxzxK7NWMlstuo4dJrjjk7 eQ25kfV kkSIJMS7PIFALkBR9a3N32vsI5GikukV0OGGHOG6jUoK5HIjOx2raWt0kqLLE6ujjKspypHLb6gjHQinqO0dVThur6a0ZWTb3rd3XFbrvOG8S56oI0ot92fHuOff6CmaC7vbm0JvPmFuEWQJIDDEUPcqFLBh3YdcEdF6gU67u4Ly3eSRZnmRpWsp7WN9o2yYE72MaYtGQrLKQV0k5610TVWjuux/D5HMj2kRYnJIBUE5zlkUhW38xU9N/UFOTbrqUWneLg72VktuWsO3qm0 jFLTNft ZM7N3hktIHaQStoVXkGdLyJ4JGU4AYalbxDY8xzpnaBT3QlH4rd1uV5k4jBWdQBzJheUAeeK2CIFAVQAAAAAAAABgAAbAAdKQO/wDn7Vwnq4rVOuo2i27r/wAyupLHim MLhcGlU 5tfJyz4hcMLcQlYnwuI5E8sNGoJ/vK1V6fhQIzsNIyTyAA3JP51du1cYEcTfrW5ezfJycJ47cn1aNtf8AaFc57X8Xwvy6Hc4MpHlzVPrzP0869bDdUkoxfv8A5 dyq8YwuzXzdp2VisSRmMbLrVssB1JDDGfLptW34X2stm2lRoj5j9In5eIfY1RTWBW2empyVrfczxrTi8M69acRtGA0XUO/7ThD9nwakTGAgFpoTj/xk/8AlXH43xUqKUVknoEsqTNEdY HFHUJeI2wGk3EQHpIp28vCTtUV 0lhGCO LHmQkTn7ZAHTzrnzyDFa ZqKWii WxT1Uk8WL3d9u7flHbyt  6x/w1VX LdpppwUAWKM81TOWHk7ncj0GB6VX808PWynp6cMpFE6054bJPdDFCCVgTUu8q3JUObFC01msZpgLuzWHFO72ms1ADRThTKWaBXCE00Cm5rKmgA60/NDQ0UCgB1DNEApuKAMUxjRMUBxQA9ZKu3wm4eZr0yAajAoYD1kkWIvvt4Ed291GKolW/4TysOKW4ViNXeK2D Je6dip8xlQfoKx66P8Ax6ln0fyy16q6LKb7yPQinxn2olBjPjb6UWvndjrP7GarvxCvpIeHzPE5RyY0DLswDyKrYPQ6dQyNxmrCKqHxWfHDiP2poV/62/8ARXT7Fipa in/AJfRN/wUV8U2aXsH2Bs7qxSedpe8mMgTQQqxBJHjBx sSUJ39Bjz2Xw84HxCzlninjZbbSxUsU0tKJEVXQBiV1JqJHoPKqzwiPj0doklsJRahC6FBaP4CSzEI2ZDuWOMZq9dhO1fz0TBxiaIL3mBhHDZ0yDoM6TlehG2x29j2u9TDS13JRnCV1jmCfV83s7cWzkw0lFyWeCyU0mn0zFfOzpoyeVNWnisCgZWu1XDwQ0ulmQqFuUTJfQhJjuIlHN48kEfrIeukCuC9puGSW9zLFK6uwIbWpyGDgMpxzU4I8J5fY16R4xfrbwyzv8AhiR3IHM6QTpHqeX1rzLfXjTSPNIcvIzO3uxyQPQcvYV6/sSvUqp34ikm/Hw9zUcNrlbfDOLURS v3IDU5RWCtGWOvQmQHisx0bu6akZpXAKE2qHMN6lAnOKHPCaYiOBSIpCssaAuNFEAodEQ0DFisU5hTcUCsMApxFFVaTLQMBWKIUplAjNPjSh0SM0DDqlPFMWnCkIKBQjTwdqETTAdQ5KfWGWgAAWrB2CuzDxG0k6d8qH2lzEfyc1p4Y62HCyEuIG/ZmhP2kU1RXSnTlHxTXxTRNLqel4Obn1xRqbEuM rH/D VPxXzZcXOs3kxVN LMEjWAZFLKk8bSEDOlO7lUMfTUyjPrVypwOMggMrAhlIyrA7FWB5jFb zNTHS6unWmrqL qa V7/AEKqsHKDSKJ2e7f2UFhEhdxNDCI 6CPlnVdOVfGjS3PdhgHzqF8FLJljupSp0N3EaNjZjH3pcKeuNS1Y2 HPCSc9zKN84E0mPb8WwqyIqqqoiqkaAKiKMKqjkABXo 0e0dFT01Wnp5OUqzd83t9l5dXwZadObmnJWsZNYrLUsV402mAKaedEoT86FwSRTPjDeiPhki5wZXjiH94SH/ljauBxV1n49XRxaQ/qkyyH1I0Kv2Bb71y2KHavbdix9no03/2bf8fwc6u7z9w1IxSmbFG7vAqLzbFdaMrlLQSOTNFDAU8wYFNEe1T6iSBLJvRZXBqJPsawslMQ2Yb0Knuc06KLNAxoSkKltHgUERUAMzTjWWWsaqi2TSNheW6ndaildqmYxsajt1pN4uRXgQmNJY80phvRIztUwsAIpyGk5rC0CJCtTwaCop4FAgudqCTvRQNqERQATNYLU2mMaAJUFPuDgZHMbj3HKhW5p0oJHKs9pb8F147cnqa3k1Kjjkyhh/aGf50Uitb2YQrZ2qk5ItoASeZIiWtk1fOpRs2vA3p3MU0edJqzUSdhUhWDWQaAfA7rSpimiCkJmKDLyo9DZMin0CLscp OtmStpMOQMsbe7BXX/oeuXwHFd6 JXDe/4bOAMtEBOvp3Ry5Hr3ZcfWvP4kr2PYtX2mkUOsW16PK pirx21GGuJdqi2/PNPfcViGu3CO1GeTuSpJaYWp2gUBxUmhAJhTMVJxQytMANSoBQlWp9uBQAGUmmJmpciA03SBSEQpjQMVKukqMDTSsSTLnxngxQMwG1VXVvSpVk08nKGTRVW2eBkidayGGKVKtEeCmpyRyN6IsdZpVJvJGw9adSpUyIVeVCNKlQIVKOPJpUqBo31jYgipjWa4pUqmlwQud84GpFvADzEEQPuI1qXIaVKvmE8yfvZ14cIEeftTvWlSqBYMFOfYYpUqCXUaM0VaVKkQY5qTDalSqREh38OYZVG qORcYyTlCMAda8qRLsKVKvTf087RqL3fyZdTyjLNTQTSpV6gyhY5DWXelSoGBLUWOsUqBGQN6PSpUCZmmk0qVAgdwdqJZ2eVz60qVRm7Ikf/Z",
        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,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUSEhIVFRUVFxUVFhUVFRYVFxUVFRUWFxUVFRUYHSggGBolHRUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGxAQGi0lHyUtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIAOEA4QMBIgACEQEDEQH/xAAcAAACAwEBAQEAAAAAAAAAAAADBAIFBgAHAQj/xABGEAABAwIDBAcEBgcGBwEAAAABAAIDBBESITEFBkFREyIyYXGBkQcUobEjQlJywfAzU2KCktHhNHODssLxFUOTorPD0mP/xAAbAQACAwEBAQAAAAAAAAAAAAACAwEEBQAGB//EADsRAAEDAgQDBQYEAwkAAAAAAAEAAhEDIQQSMUFRYYETIjJx8AUUkaGx0QYzcsFCUrIVIzRigpKiwvH/2gAMAwEAAhEDEQA/AG7hdcIHSBc6ULcVJTleLLN7Wl1VvV1OSzG1J73SapsjaLrO7SqM0TZtTmkKwZr5QvzWfeVY2W82bICrxkgssns osFaR1N1fpuEJBbJVhLMEA1IScr0N17IXVLpgai1VaFRV1YFDaUhCpJC5yS pNlIaE02szVtRVgtmqempFaRUJSborJionB0VRVBW7aIhBmpFIUWVVSx5rS7OIVP7vhTMM5CkOhcRK1sJbZRkaFSQ1ZTjKtJq1oUspprAEXJIPq0H3tMo1pQvZCsHNCgYkCOZSdKnl0pcIUzQFVVkwCarKlUFZPdQXxoiAUKmcFIOnzXyR90NKJMpgCN72uQLLlElTC9HG0u9Bk2l3rH/wDEjzXx1cStI1BlVYMutNU7R71SVtVdV/vR4ock6puqZimhsIc70KnkzXyR118hbmlHVGFfUtQrinqLLOwFPsnRhyiFftlupTyWCo4azNMTVSMPshMpeuF0jhARZ5kk6TNKcUSu6CNXjIrBZ7Z0ytJKi4s65Hd e9CXhq6Lpp87Blf0z SWkladL hQ4rE2sfD0srD/AIflkM aQ7ERZG2mSquZtwlmQFaSjoi02ezEON/w4hSq9gvDTLGC9gzIscbBzI4hcKofopLS3VUcMaJLkisag1JFlVquJKawJR89kJtRmlqmRKiXNWMOTCXUhaKCVFdIVT01TZNmqFleCrlCrXqhqZFa1b7qmn1QORtQ7qJK5QeUCJSuuQ7rlC5FaM0w1igxiYaMlOcroQXtQnospQSVAK5fA1SjavrQvt7KVyM16KJEgZERsi4lcmg5F6ZKNevj5VAK5HklQ4cygOkTWzm3KlcrzZ4toPyU3a/LlfQIOz2dTF3k q yk6f1VZ75JTGtsm4HC4N7Z8FeyzAhpblz/wB1moXm v8ARPx1IthGtraJLoOqc0HZPR1puLnJanYe0cBBJBHG/EcjdYf3R5OV1otmUTg3rHwGVvVQHNaVD2lwR9 tkxlhqqYBts5YxaxHF7bep8/PzOpr16i2FzzhuBwtrfmF5HvNQOpqiSFwIwm7b8WOzaRzyNvIpoAqXCT4LJeaouhCRKNemArDQGoSZRxMpiqKUKiGpmZDCeMyBIbqUUd0foVEqVXlDcU3LGlJAoXKK5fFy5crVoyXxz7KIcoyuQwpQZnroggSORYUQChOsaEKoajRhDmC5ckiF9BU3tQ8KhcpYlFzl8wrsC5cpNVjs82KQY1MRPsulctLC13RtcGOw6XscN IucrqeG o81ZCXAA0vGBtmtab9lpzOWhJuVCpY09dpyKzO2DjC0ewLAEo2KyepY2tBdbTRRhYDxUpqRzshoocSpDQs7X1BxkulkJHCMHqjv4BWmxq19wWzyObxa83CWrqICN0ZxNNwbgkW55A2IPfmi7A2S8m7QcN PxTHOlkylNbD7hX9ZtVzGEh1icm2FzfuAzJWF3nxksfJI6Rzg7N4s4WNsJHDO S2e9 zCzonMc5uJpAczVrg7PMaXCxe98Do6gxuc91msIdI7E8h7Q 7jzu4pmGbG6XXdOypAEw0IbQjNCuKspsYptjX1oRYgoUosMSZdHkosIUzIj1QhIzsVdM1W8xVfOxQpSVlyN0K5RK5FDkN7l9coWXLkMhGhNl8axGY1cFyZY9RcLr6wIgCIlclZGIWFPOiuntlbsVNSfoojh/WO6jB34j2vBtz3JZcBqVMFUQCYgpnO7IJ7 HqvRNl zVrCDUTYj9hjbM/iJxH0C043PjLLROe22gGAgfugD5oqNXDuP944gcmOJ Y gciLHeiF5FSUcLT9O53gA5o/iIzVjs/dCaoLnUwxxMN3lzmgtZrfXPIHgNFabzbFmgu7tMGRIv1b6Y2Ozbfnm3vWd2bth9M/HGS292uaDk9h1b3d3I2WliG0amFLsGWk7Eg68HCQQeRyxu0hAAQ6HrVnYfSku6RrHBou197X4OFkvUDCwRF4cWjUCw1vouq9oiVoc0i9rYhlmNfBU0Eri83J0PzXmTTOa2i0hU7t9U9FLhTsdcearnsuvrTmuc0FQ10K4M2PUAjvAKf2PiLrMacvQKqpW iDtmZ3RvYHuZe1nNyIse7mlAE2TbRK3u1qZklOcPbYQ5oNrkHJ48rA S8m38mx1LSdRFG0 ILvwstbuk90jCzpHOcLWLznnla/kdVl9v7t1zZXvmpZRiJILG9KywyAxx4m6W4q5hgcxnZU65EQFm2tRGhE6IgkEWI1ByI8RwXFiuyqym1FYVCNqKGISuXOkXdIouahyIpUQjYroMgUI3qcjlEqVFcoYly5cgOU2tX1jE1HEuXIAauBR3hBLVy5GYnIIrpONq2u7GxMmzyizL3Y06vt9Y/s/Pw1VVcQExjbq/3L3SjAE9Q0Occ2McMmjgXDie46eOm5klaBl fBUTK2wSk 0 9Vu1ATezJKeqb5lL09XI05E RslRtC qlHWMBVckTITcpAuo7ZqXEEv1sbXAOuoN9QeIORXmW81G0WliFmOOFzB/y5LXsL54HAFw5WcOC9H21Vte3LWyw9TBjxxfrGkN/vG9aP4gt/fKdSrmlUzg2/i5t5/p8Q3sQLEgiacsiPJUWxZbB7O /r/snbFpxDz8FT7MltIORBH4hX5Cs4kZahQUrtRqeoBXT2/FVzmEG7fRHZLcZqsW3kJodsnKutLWgNvf4kpKavY4We5zT 00j46FFilaHAnOxT1XO22JuH8VFmkCFPiEypbDyDZGFxYXPu4AhpDGjEL8c3tW22PvM9o6rtOBWXp617oXEnSK4zJsHSwtaBfTR6raactcBzUkmTyQBoK9Uqq lq24K2lZJyeAMbb8Wu7Q8ivNd9tynUlp4iZKaQ2a89qN32JLfA8fnsdhzNcyxOYTe1doMfE6B2bXDC4cO4jv4ptOpAuUhzO9AC8ZjYjBqjOzA5zTq1xafI2/BcHK0ECm9qTlamg9SbDdGAlyq yiVZuorqDqJRF1MqsXKw91XKYXSk4ArCGNV8BVhC5QpQp40uWJyZyjDCXEAC5OQA5pjWlxgICYV3udsUTSY5B9HHYuH23cGeHE93itpVVGKS3Bo8hwAS zKb3eIRZXFy4ji46 PLyUIz2ncyB6f7rHrVg93dNloUqWVt9UaSdISypesqDewtpfNCM/VxaC10oyniAmTMQhGY80BsocMlElCmSjGYqtq5CHBw1aQ4eIN01dLVYyKNrQTB3QP0WX2nD0dS9o0bK633cRt8CFfwm4Cp94v7VJ95v Rt1c0jLsBCt1STTpuOpaPoFWojvOHNQdChuiHDVPRhRmDQDzOn4quHlOLRCrXGwzyHPggTTlt8/iErtqpucA0bmfE6BVkQyPiFfpUcwBVOo DAWxpaoupXv 3LFEPCJj3u MjPRRiNyEKJuGlpm8XdNMf3niNp9IEWmConxPI/mI/wBvc/6yrLGw0eQ 6tqCrLU8KkucqlgT9CLG54XKEIyFjtrS/TS/3j/8xSfTINRNiJdzJPqbqLStQCBCziU7DIrOlbdU9OM1dUT0YKEhWkNPdfZaVEgnAX2SoClAkug7lyJ04X1EoWOa6yZikS1lEapaan8S0G7NN1y/jHht/fPOFn8PWf8A4aoaSLTmdO4c1q9lNDWwMHGWZx7 jhYG nTu9U6ux1PCOqRc90eR8XUtmPUMotBqDlf7fOFfSaIVWcLQ3lr4nMorHdYevpmkq6Ql1150brSiSqnaTRk7jdc83jPdkDzAtZArZevbusb aGKg2sdP5J4a7KEgubmcmJH4X5AkkDIKTJDo4WJz/PJDjlLr2HWPwA andrSbnPjc5oTwKY07zZTuhzNvlxOXrkpscHafHJSEoZeU6RAyeJb2B5vLR5oSS0EgX4cTsOqKx8lkdt1J96le3VsryOXVeQPKwV7HVNa0EdhzQ9v3XfV8WkFv7qyMnG ZVhSkyU72DtQ3lA5xusJR5HC7wLloYigGsbezYaTysAehieRJVKjVOY85PXVX0e1WnIBDra4NY5wtkMzyLr4QO82PkCeCynvBGmqs9sswYacf8v9IeczgOlJ 7kwfcPNKGHHaBg3v0EfuQOs6AphxByk vWqrHaZ6uNz81w08/kufr4ZKThl5FarReFSK19WzD0Lbdmnp2nxcwSH4vKnTtTG2WfTvHIhv8DQ3/ShMavO0TNJp4gHqbn4kytYiCQjxom05 ippX8cOEeL qPn8F8gbmqXfKq7EA4DpHeJuGj0ufMKzRbmcAk1nZWrMEo0bLr5FCrCkp81okwqLQuggKdiiIVhS0qPLDkqrqxaVZFIEJMSFc9 S4MUJGFWqb5CrPZBhC6Rco9CuRyhhVRYujjzufz3JlzEWmp8Ruey34nkmYWl2tQNUusExSMsMR1Oi0Zon07aV8ot07pJI/7t8MWG/InATblZVFBSPqJWQRC75DgYOA7z3AXJ7gtv7Y6UxQwOj7NM NgzuQwMLLk JaEXt7EMptpUJ8TvmQQJ/wCXUfF2GFy7gP8A1Isfn5FAmGV0jsWvEg1 rf5JqrkGl7LzsELQBCSqYmu1HmlH0nFufcUpNKcV8YyyRYK1w7WY5hOyPboUnOxxuFFlwQM7orWOecrWOZP58E46Nrxe fMfilK o6NmFpAJyubNHiSoD50F13ZxqbI7Bh6ou97rAAZ AsqjeavFvd2uBscUrmm4LhcCMHiG3N ZP7ISk 2sDSyAm7rh8xyc6 rYx9Rp4ntHu0VRbh6qzhsOS7O wGg3PAkbRqBxgm4ASK1URlb6 /M9FE5 dyndlVHRSMktcNPWb9phFpGHuLS4eaVIz8k7FDGW/pCx3EOYSw DmXd5FvmtB UjK8Eg2MAmx10VdszITlPQimqpnnNtM4mO/wBd5v7v/wDfgxyq5XfWJJOdycyTqSTxK0W3q2mdYtleQGt6rIz15GxsjL3ukLbZMAADTx5lZWV11WwDndmXVAc5ygyCNBbUDclxIEd7LJizKwAMDST6 nwWs2HsISbPlma1z5XPLOrbqCMdJmO 3C2oWeooMb2M 25rP4iB Kd2NtIRMkjLnBswwubYFmQ6j YcHcuCVpJiwh7e0Ddt B4Hy18k8Zm5j8PmhsWgcz y1 1KphnkIN8T3uFuRebKTIiRdZ/Z8J1OZ781pqS5yWJ2baTQxugELRDi65RqODidAsxvBDime/mbeQAA S1XTXdhGjcz3kKlrwCVdwo1Kq4g3AVNBTKzpKayjExGM9grIukmwTUZsuqJBZV5q0lUV/BLfRRNqwrASC6KADmqVlQmmz5aprGwELnZk9kuSnSrkaCECQsHad5D ai tByFgOACqzSgayfBHp6UEgNJcXEBoGpJNgB3k5LTpZqNmNA4kkE9b6fBCTK9C9jQJrpZsN2w08hJ5Oc5gaPEgP8Ait3tqBtRG OUXbICHDvN8xy/Cya3Y3fZs iEAt00vXmf38R4DsjzPNQqJ2gkahfPPxHjTWxDWtOl7cbZZ5wJjaVrYGnDSYXk2z93pqSpe113RFjsEg0PWbYO y618uPBM7Tb1bHhnzWx2wOp3X09eKw1dJd5sSbXvewAtwWjga78QztH66HnCGuwU 6NEmMTb9UEX04hKySi TSDytkfFGgfm48EjLIXZn0V9rZckF3dsrmmcLAg5DK38 9Uu9MnUaOZ ScpYjc2NrWz0yPPyRYqBs1Qxr2l7WC9iciXHjbXQZJeZtN2dxsLpgDqjMrRqlfZ3smKoqCJoZJGgEgtJEbHAE/TEZ2NrCxGfPhp9tezdriX0bw3/wDGUm3 HJn6O/iV9JtWnpGNjke1lrYYI2gvN9MMLdL8zYHmo01RX1Dg4D3GDUBzGSVMg72vFowRzAt 0qZxmLc/t2xTpgfxmzvJovP6fijFCi1vZnvP/wAu3XT4ryTaWz5IJXxStwvbq3E11ri4zaSNLcUk6S2S31XuzFDXtbJN0zZGukc2UHGXSOLGNeWnruc4lwtY9UkgDNNP3IpJXhoJhLiQ0NeCHnk1khu45jIHitV3tGkMsknMJkAx9 fUKoMLUIJEW1E3Xm7AdSusvW4vZrStaC WaQnLCCyO3I2AcTexGvBBn9nVLIwine8POLA8ytfGXNLmlrhhGWJpBIOWueij 08KTAcY7t8pjvaXjdd7pVi442kTbW3JeXtCco47nuGStd6tkR0hjpmu6SXDjmk0Ac64ZGwcABiJvmbtOWgFs nsBkm1cQ19MFhsfmOPXZRSpkPg7KwpmWCd6WzUtE3NTmzsFQA3V08EZsuFhJ45D5n896qKupuVPaU3WwjRuXnxPr8lUzvV2iIbCpVTLpT7apAmqFXGYrsRKcLJJMostSgNddE6JfTDZHqhhRD1MT2S70EyLlIKsPeV9SS5dBR5l iZfZlsfS7weJEzv6hQ2X7OdlU0zJ2ySOdG4PYHyAtxtN2kgAXsQNUR260mY6aVnI4hIw/ukB/liSg3JrMzJNE1ozx4iBbmWuabevmvK0/bWNxTi1hB8 0cAOZzxHnrutH3XDjV/wBPsrHaE8r3OcXwi l5NBwGQKpqmS2b6lg7mMLvibLL7x1kNPdrNpxzSD6kULpBfkZQ4MHxPcshU70SEWBuedrfBAz2Di6ji o4CbkmJ87gn4D9k842iwQ0/ALebQ2g0tcGvc/DYm4AGfIX8Vj5TiJU9j1RNPd5zkkdnkLBgAHxxIZFnE i16WHGGZ2YMxvxVN7 2dm2Unts0gZ66qqGnhmrF5yJSQtiuNP6aJtMxKGqBaFYUQtca3zv5LRbs04OI5AuOR5gZWxDNuh07wVQRjDHlnYcOJ/FUe7m8ctM8m2Njjd7CbZnVzT9V3wPEFKqUKlZruzNx66eaYKrKRaHCx9dV7FRQNge1rKcx9Jn0kcIDS65Ba97LvBy7TgGm qdrqxsUb3vuGMu91rX4AMaR2iTYDmXLzY 0eQSAtp2dEMixzj0ju/pBk092EjndazZu tDK0YpBE4EOwzNcC1wyBDm3YbXNje egWZW9n4gQ5zCQfFBzOO8aSJNjBjlZPZiaRkNcBwkQBztrG1pStBseTEaqpA94mcX4P1QLcEcY72sLh /zCqd5tq0fQCVr2STxSYYCHkOjkElzIWB1iz6O4LgQer3hNbQ3/AKTpXNAmewFzQ8NY5rmm gc5ptmeH803sPeXZoY6OOVsDXg3aIzDckWu54aW3A0JJVxrMQKwq1GOsRGXQN3EXdG0RMAbpLnUzSyMcI3nUnbl1ncq83cqJXU0MtQ8PlkAkJOGO5kP0TWhoABwYMhbO6HtOvfSsLoYmtip4mSOc4WYWXLRTQAfXOEtLj2bg2OIFUm m8NKadvQzsklZNDLEyF QdETbHkRgAvlfXCqT2k71sqMFPTPxRA9I4gEXc4DBHny1Itrbkho4WpUqNqOYQHOcYIgNggNMfokCZExG659VrWlgOgAkbzqJ87/AFlZLpXTzvlfq97nnjm43sO4ZDyV5Tx5Kt2TTWFyrdmiuVSJyt0FhyAsFFFsCTqURgRCzjy08SvkTbkBWQpclzGyVFR0BZmqhVNWNstdXQ2Wa2ixX2BUHFVrEzC26CGKy2bFxKMhRKLFTIc8CswAg1nZTKdMuQOcqKZiTe3NWcoVfMEdRmVQCpYl8Q7rkpGvc9qb6voLulY6UlwDCCALE5tJtYEC9jx0XnW/PtAqdoOwnEyBvZiDtTxdJbtH4Begbbo2VEb6d YDbh1syODh4aei8X2lRPgldFJ2mnXg4cHDmCFg xalN1PJEObeNAecbnzm8HUW0Ma1zXZhoUt0/cvhlUg5SLhbRb4CoLbRU4FPCwixDAT4u6x LiksLgSDorCfE5zWtF q0ejRdLSxEGx1WYSbzutANFoSvvAtbTXNdHT3thN amYAe5N0tKGm4KguA0UZHE3Vtu7RB8rG6gdYjw/rZXe8vs/jqB0kP0cp1IGR 8Li/jr46LPbJ3khpqjBIO00Xdwbc3seXA i1uyt 2ST9CyKRzQSOkY0mO4/bBPhe1lXqO7PvuzNi YA6cdCI4gyOIRwXHK2CNIka WvUacV5HtfYs9K/BPGW8natd4O/DXuSIOS/SO2dlx1MDmOaHBzcsuFuHfy71 d9o0ToZHwv7THFvjxDvAgg a08NiC9xY JiQRoRp8rTc6iOAp1aYAzN0 h9dbGeKQIRWMXNZ5lem7jez3Faorm4WashOWL9qXkP2fXknVajaYk9B60HE6BLYwuK89NK8RGbCcF8IccgXH6rb9o87XtZL0UN3eGvir3fzbwqak9HYQQ/RxNGTcsi4Acz8AEtsmlyF9dUh1ZxpZnWnQctusch5cWtpgvgbKzpY7BGXBmSlhVCZV6E3s5lyreR4sqmCTCLqMtWrtFndlUa7 9CFtCVUVULpqsqLusENsV1Y0SAJVY NN0GiNLApRCwRNMqXCEdpSla 9kW5QphdWGVMqVllJSpXoblWToVFkWaIHtCuNkr7qOS qz6ML4n 7BBnK9Ur48L qM2kkC3D6zfXMDVZne7dd1XF00QGKIEtJNsbTmYr6F2rhw15i yrYC97GjIvNr8jhY657rF1/BZn2obfFLGKOnNi8HHxAB1c08CT6ZLwfsbDmo4Vv5fmeHlqTy81u4qoA3Id/kOP2Xjl BRqaldI5rGZl5DQO85IEjVpNw6W8r5eEbcvvPu0H0xL1TnZBJWUBJhaiIhr3gajLxH5CRqeJCcrGht8OpOZPcqyU8lmbrRGihGFabLpTLIGN46nkOJVfEFf7pbVpGufHK9okcQLO0tqADzJPyXO0n114Dmun16ifJaul2FRMOIxRYuLnYS4 J1Vi/bFJCOs NgHOw JVNNujTTEuL5C1w0bK w72gOsPRYHfHcqKjBkbUjuje27yeQI/l4lIpsuCQGyYBy5pO0EOBnpxmFDnbAk7kTltzBBHzW/2l7TKSMERl0ruAYMWZ0sez8Vh27ubQ2nOZ3RdE12QdIMAawXs0N7Tj38b SxuzZw2WJzjk2SNx45NeCfgF7dTe0WjIbHGZJH8GsikJP8A2q1Ua6hUzCTY96JjSwAEDjLs3CYlJaQ9sWFxaYnzm58hGuy7YW6NLQ4S2M1FRp0jhcMPEjgwfFC9pm3xTUpjDryzgtFjY2t1nZaNF/l4qy29vM2lpzNIMJOTY73cXHRthqfzdeKPqJqyYzTuLvHRoJyY0aAJWHomu8ucTFp25xeSSRYk6N0DSYRVKvZtt6 wn4mbkqy3O2K2QEyNuCMIB5cStBJupLGLxfSN ySA8dwJyd8FYbFpcLB6q7jlssTFe0axrOe024ahaVLDsawNjRYl1BP ol/gJ IyRoti1TtKeTzws LiFtenKZheTxv5n4JR9q1gPC35/dcaA4rOzbtGKhqJJ8GMCNzADcss8B13aZhxFsxksFLPyXqO/wDU4NnPFwDI Ng0BPWxmwOuTV5LEbrf9iVqlbDuqVDcuPkLAQPWsnUlY LaBUgcFKBpJzT8TEOljTkkVgtMyltISsrVzIskAyZppj8law9KUqq 6jgQHjNFe9JF aCs2DC5iI5RaoYrmychiR4cEushquACHgK p/oVy1OyKqdqF6/ALSwn7L/9ErPwC8Y9qzgdqVFha3R/FgPzK9tYy7x3SNP/AHA/6ivEPac6 0ZXcxHf/ptXh/w3egRwef6W/sSFu43x9B9Vklst0m4KVzv1khPk0Bo OJY Rq3GzosFPCw/YDj 8S/8Vs4vutA5qvhxL1OY5Z KVKPK 5SxOaz1eRGnLwWIlkLiXHiSfUrX1klo3nk0 tljQVdw1gSqeINwE9RbYqIf0U0jO4ONvTRR2htKWd/STPL3Wtc207gMgk7qbCnikwOzACeMCfikZnRE2X1q2Wxt6W0jOiooMcr8nTSAlz3cmRtzw8hf43WOBv8Any a9x9jkdPJs9z2RRtqYXu6SQNGN7e0AXa2sbW06qRjQBSzZS6JIEkSQCdvlz6IqRINrc1htr7B2hNE2rrnWZcYWGweA  eACzRkBmb5jJDoKUCwAs0Z ma9X3mgElJMzXDcj90iQf5fivNhMyPDjdhDiG34c8 7JZ3sz2g7E4R74AIJsLCCJHW58zdNrUorNaTYxcrT0LwGgDkmWm6QgFgOR8/Qp nXmXjdbyZaPza6Zp28/5ePkhMYnaWPOw7reKqvfAQOCyftWkJip4Rxc6U8shgbl5uXnlMCCtZvrX9LVSW7LPo2 DMr ZufNZhh64XvfZuH93wrGHWJPmbn4adF56tUz1CVd0EQAz1R52iyhSC6ZmhyuVdhKlZatfZyHHUo20I7ElVr5UbKhC4tlWDqhCxpJ1QgipQOJJuiAVvT2urKGQLPQTpptT3q1h6gYZSKrSVf9OF9VH7wuV73xqr 7lfoKl/SD734Lwb2j/26X/D/wDCxcuXiPw1/h3/AKj/AEsW7jfGPIfVZqXQ/ngt5N9X7rf8oXLltY/ Hqk4bUpKTX1UXcFy5UCrYSm1/wBC/wAPxCyZXLldw/hPmqdbxLgptXLlYCQiR9r L5r132Bdmt8G/J6 Lkx/g6/u1SttN2Jfuf8ArK8Z3m7Mf3j8ly5eS/DP5NT/AE/RXsb Y1afdX yt8/mr m0X1cs/G/nP/UVp0Py2 Saj4Ky2Z22 I a5csypojfovHqzU J aRg7S rl9MK8uNFodnJuo0XLlw0XBZnaioZVy5BujCWkUWrlyndcmYkZi5ci2QlHXLlyhQv/9k=",
        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 >
            <div >
                <h2>The GOATS</h2>
                <div ></div>
            </div>
            <article >
                <div >
                    <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 >
                    <button >
                        <i ></i>
                    </button>
                    <button >
                            <i ></i>
                        </button>
                </div>
                <button >surprise me</button>
            </article>

        </section>
    </main>
    <script src="reviews.js"></script>
</body>
</html>

CodePudding user response：

Your showPerson function should not take an argument. It should just use the currentItem variable that you are modifying with the buttons.

function showPerson() {
  const item = goats[currentItem]; // <-- Access the global index
  // ...

Also, you did not add the listener to the previous button. The decrement of currentItem should be attached to the prevBtn. Also, I would rename currentItem with currentIndex, because it represents an index.

prevBtn.addEventListener('click', function() {
  currentItem--;
  // ...

Speaking of indices, your variable should be zero-indexed. Arrays are indexed at zero.

let currentItem = 2; // Item #3 (or index 2)

Working example

// 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 >
      <div >
        <h2>The GOATS</h2>
        <div ></div>
      </div>
      <article >
        <div >
          <img src="" id="person-img" alt="">
        </div>
        <h4 id="player">PLAYER</h4>
        <p id="position">POSITION</p>
        <p id="info">INFO</p>
        <div >
          <button >
            <i ></i>
          </button>
          <button >
            <i ></i>
          </button>
        </div>
        <button >surprise me</button>
      </article>
    </section>
  </main>
  <script src="reviews.js"></script>
</body>
</html>

Page link：https//www.codepudding.com/os/488392.html

Prev:How to scroll the buttons horizontally on small screen device
Next:Bootstrap 5, columns not aligned
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding