неперехваченная ошибка типа не может прочитать свойство «addeventlistener» нулевого javascript

#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 all

2. Мое лучшее предположение заключается в том, что происходит ошибка nextBtn.addEventListener() . Причина, по которой я думаю, что это потому, что вы используете querySelector , чтобы получить кнопку, но вы указываете, что next-btn это имя тега. Я предполагаю, что это либо идентификатор, либо класс, так что вам придется сказать это querySelector() . Идентификаторы обозначаются буквой а, # а классы . -буквой а. Если next-btn это удостоверение личности, вы должны были его иметь querySelector('#next-btn') . Если это урок, то тебе следовало бы querySelector('.next-btn') .

3. Спасибо, что сделали свою работу