我在做什么:
我正在为自己制作一个作品集，纯粹使用 HTML、CSS 和 JavaScript。我正在创建元素页面并尝试创建 <p>使用 JavaScript 并从 .json 文件插入数据，但是:
问题是什么？
Fetch API 无法与 addEventListener 一起使用。
我尝试过:
创建<p>先从addEventListener函数中插入数据，但是也不起作用。
JavaScript 部分:
async setProjects(){
let response = await fetch("contents/projects.json");
let responseJson = await response.json();
document.addEventListener("DOMContentLoaded", function () {
var p = document.createElement('p');
p.innerHTML = responseJson.one.bio;
p.id = "bio-project";
// p.style.cssText = 'border-left: 8px solid aqua;';
document.querySelector(".projeto-contents").appendChild(p);
}, false)
}
HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Projetos - Vitor Hugo's Portifolio</title>
<link rel="stylesheet" href="../style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<nav>
<a class="logo" href="/">Vitor Hugo</a>
<div class="mobile-menu">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<ul class="nav-list">
<li><a href="index.html">Home</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="projetos.html">Projetos</a></li>
<li><a href="contatos.html">Contato</a></li>
</ul>
</nav>
</header>
<script src="../mobile-screen.js"></script>
<!-- -->
<div class="projetos">
<div class="projeto-contents">
<h1 id="titulo-project">test</h1>
</div>
</div>
<script language="javascript">
const portifolio = new Portifolio();
portifolio.setProjects();
</script>
</body>
</html>
JSON:
{
"one":{
"name":"Lorem",
"bio":"Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos dolore pariatur accusamus quaerat hic distinctio, cum, ratione dignissimos, doloremque incidunt provident deleniti consectetur qui alias quam quod porro error temporibus.",
"language":"Python"
},
"two":{
"name":"testname2",
"bio":"testbio2",
"language":"testlanguage2"
},
"three":{
"name":"testname3",
"bio":"testbio3",
"language":"testlanguage3"
},
"four":{
"name":"testname4",
"bio":"testbio4",
"language":"testlanguage4"
}
}
元素链接:https://github.com/vitorhugo1207/portfolio
我必须做什么？请帮我。还有一件事:关于 json 可以使用数字作为索引吗？对于任何拼写和语法错误，我深表歉意，因为我正在学习英语。
最佳答案
async/await 允许您编写看起来像是同步的代码，但实际上并非如此——它只是用于处理 Promise 的语法糖。
在 fetch() 发送 AJAX 请求后，浏览器继续加载文档。完成时，DOM 已加载，并且 DOMContentLoaded 事件已触发，因此为其添加事件监听器为时已晚。
您可以从 fetch() 获取 Promise，并在 DOMContentLoaded 监听器中使用其 .then() 方法。
setProjects() {
let response_promise = fetch("contents/projects.json");
document.addEventListener("DOMContentLoaded", function() {
response_promise.then(response => response.json().then(responseJson => {
var p = document.createElement('p');
p.innerHTML = responseJson.one.bio;
p.id = "bio-project";
// p.style.cssText = 'border-left: 8px solid aqua;';
document.querySelector(".projeto-contents").appendChild(p);
}))
}, false)
}关于javascript - 函数 addEventListener 不适用于 Fetch，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70571742/