0

I got Uncaught TypeError: Cannot read property 'addEventListener' of null. I have tried to click the nextButton and prevButton but they are unresponsive. The event listener for the window works fine.

const img = document.getElementById("person-img");
    const author = document.getElementById("author");
    const job = document.getElementById("job");
    const info = document.getElementById("info");
    
    const prevBtn = document.querySelector("prev-btn");
    const nextBtn = document.querySelector("next-btn");
    const randomBtn = document.querySelector("random-btn");
    
    let currentItem = 0;
    
    window.addEventListener("DOMContentLoaded", function() {
        showPerson(currentItem);
        
    });
    
    function showPerson(person) {
        const item = reviews[person];
        img.src = item.img;
        author.textContent = item.name;
        job.textContent = item.job;
        info.textContent = item.text;
    
    }
    
    nextBtn.addEventListener("click", function() {
        currentItem++;
        if (currentItem > reviews.length - 1) {
            currentItem = 0;
        }
        showPerson(currentItem);
    });
    
    prevBtn.addEventListener("click", function() {
        currentItem--;
        if(currentItem < 0) {
            currentItem = reviews.length - 1;
        }
        showPerson(currentItem);
    });
Tien
  • 1
  • 1
    In the interest of content quality, Stack Overflow doesn't permit the posting of duplicative questions. In the future, please utilize the search function or your preferred search engine to research your inquiry or error message before posting here, in accordance with [ask]. This is a duplicate of [Cannot read property 'addEventListener' of null](https://stackoverflow.com/questions/26107125/cannot-read-property-addeventlistener-of-null) – esqew Aug 04 '21 at 18:13
  • Your selector is wrong. Without seeing your HTML we cannot know what is wrong, but probably you intended `.next-btn` instead of `next-btn`, ...etc – trincot Aug 04 '21 at 18:18
  • you are not using valid selector in your `querySelector()` method. You have not indicated whether it's a class, id, or whatever you're trying to target. You just gave it a string. The `querySelector()` method needs a proper selector: `.something` for class elements, `#something` for ID elements etc. – Martin Aug 04 '21 at 18:18

0 Answers0