gpt4 book ai didi

javascript - 网络显示 Dom 内容已加载。 Console.log 不会记录到开发人员控制台。调试器没有命中。函数未被调用

转载 作者:行者123 更新时间:2023-11-28 03:05:34 25 4
gpt4 key购买 nike

我仔细检查了拼写。该文件名为. 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com