我仔细检查了拼写。该文件名为. Index.js 位于 src 文件夹中。真的不知道为什么 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>最佳答案
唯一合理的解释是您的代码是在 DOMContentLoaded 事件触发后执行的。考虑将脚本放在 <head> 中标记以确保它在加载正文之前运行。
关于javascript - 网络显示 Dom 内容已加载。 Console.log 不会记录到开发人员控制台。调试器没有命中。函数未被调用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60642953/