Сеть говорит, что Dom Content Loaded. Console.log не входит в консоль разработчика. Отладчик не бьет. Функция не вызывается - PullRequest
Новая
       36

Сеть говорит, что Dom Content Loaded. Console.log не входит в консоль разработчика. Отладчик не бьет. Функция не вызывается

1 голос
/ 11 марта 2020

Я дважды проверил орфографию. Этот файл называется. Индекс. js и он находится в папке sr c. Действительно не уверен, почему не работают console.log и отладчик. Вкладка «Сеть» в инструментах разработчика chrome сообщает о загруженном содержимом DOM. Я озадачен, почему ни один из моих кодов не работает в консоли. 

document.addEventListener('DOMContentLoaded', (event) => {
  console.log('DOM fully loaded and parsed');
  debugger
  fetchAllBeers();
});

function fetchAllBeers() {

  const beerContainer = document.getElementsByClassName("list-group")[0]
  debugger
  fetch("http://localhost:3000/beers")
    .then(resp) => resp.json()
    .then(function(data) {
      data.forEach(beer => {

        beerContainer.innerHTML += renderABeer(beer);

      });
    })
}

function renderABeer(beer) {

  return `<ul class="list-group">
      <h1>Beer Name</h1>
      <img src="<add beer img url here>">
      <button class="btn btn-info">Like</button>
      <span>add number of likes here</span>
    </li>
  </ul>`
}
<html>

<head>
  <meta charset="UTF-8">

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

</head>

<body>
  <div class='row'>
    <div class='col'>
      <ul class="list-group" id="list-group">
      </ul>
    </div>
  </div>
</body>`

</html>

Ответы [ 2 ]

0 голосов
/ 11 марта 2020

Кажется, в вашем коде есть реальные проблемы. Я скопировал + вставил в редактор фрагментов то, что вы опубликовали, и произошла ошибка.

В будущем, если вы воспользуетесь редактором для публикации своего кода, вы сможете быстрее обнаруживать ошибки. 

document.addEventListener('DOMContentLoaded', (event) => {
  console.log('DOM fully loaded and parsed');
  debugger
  fetchAllBeers();
});

function fetchAllBeers() {

  const beerContainer = document.getElementsByClassName("list-group")[0]
  debugger
  fetch("http://localhost:3000/beers")
    .then((resp) => resp.json()) // FIX THIS LINE
    .then(function(data) {
      data.forEach(beer => {

        beerContainer.innerHTML += renderABeer(beer);

      });
    })
}

enter image description here

0 голосов
/ 11 марта 2020

Единственное рациональное объяснение заключается в том, что ваш код выполняется после запуска события DOMContentLoaded. Попробуйте добавить скрипт в тег <head>, чтобы он работал до загрузки тела.

...