#javascript #html #css
Вопрос:
Это очень простой код Javascript, но я не знаю, почему я получаю эту ошибку. Я проверил имена идентификаторов, поместил скрипт в конец текста html, но, похоже, ничего не работает. Получаю эту ошибку каждый раз при следующем добавлении списка событий.Я видел человека, делающего то же самое в Интернете, но он не получает этой ошибки.
// local reviews data const reviews = [ { id: 1, name: "susan smith", job: "web developer", img: "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg", text: "I'm baby meggings twee health goth 1. Bicycle rights tumeric chartreuse before they sold out chambray pop-up. Shaman humblebrag pickled coloring book salvia hoodie, cold-pressed four dollar toast everyday carry", }, { id: 2, name: "anna johnson", job: "web designer", img: "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883409/person-2_np9x5l.jpg", text: "Helvetica artisan kinfolk thundercats lumbersexual blue bottle. Disrupt glossier gastropub deep v vice franzen hell of brooklyn twee enamel pin fashion axe.photo booth jean shorts artisan narwhal.", }, { id: 3, name: "peter jones", job: "intern", img: "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg", text: "Sriracha literally flexitarian irony, vape marfa unicorn. Glossier tattooed 8-bit, fixie waistcoat offal activated charcoal slow-carb marfa hell of pabst raclette post-ironic jianbing swag.", }, { id: 4, name: "bill anderson", job: "the boss", img: "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883423/person-4_t9nxjt.jpg", text: "Edison bulb put a bird on it humblebrag, marfa pok pok heirloom fashion axe cray stumptown venmo actually seitan. VHS farm-to-table schlitz, edison bulb pop-up 3 wolf moon tote bag street art shabby chic. ", }, ]; // select item 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"); // set starting item let currentItem = 0; // load initial item 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; } // show next person nextBtn.addEventListener("click",function(){ currentItem ; showPerson(currentItem); });
Комментарии:
1. все это нуждается в правильном селекторе:
document.querySelector("prev-btn"); ...
должно бытьdocument.querySelector(".prev-btn");
et all2. Мое лучшее предположение заключается в том, что происходит ошибка
nextBtn.addEventListener()
. Причина, по которой я думаю, что это потому, что вы используетеquerySelector
, чтобы получить кнопку, но вы указываете, чтоnext-btn
это имя тега. Я предполагаю, что это либо идентификатор, либо класс, так что вам придется сказать этоquerySelector()
. Идентификаторы обозначаются буквой а,#
а классы.
-буквой а. Еслиnext-btn
это удостоверение личности, вы должны были его иметьquerySelector('#next-btn')
. Если это урок, то тебе следовало быquerySelector('.next-btn')
.3. Спасибо, что сделали свою работу