let listApi = 'http://localhost:3000/jobs';
let listJobsBlock = document.querySelector('#list-jobs');
// function
const getJobs = (callback) => {
fetch(listApi)
.then((response) => response.json())
.then(callback)
};
function handleDeleteJob(id) {
let options = {
method: "DELETE",
headers: {
"Content-Type": "application/json",
}
};
fetch(listApi + '/' + id, options)
.then((response) => response.json())
.then(() => {
let jobItem = document.querySelector('.job_item_' + id)
if (jobItem) {
jobItem.remove()
}
})
};
const renderJob = (jobs) => {
let html = jobs.map((job) => {
return `
<li class="job_item_${job.id}">
<h4>${job.title}</h4>
<p>I started this job from ${job.started_year}</p>
<button onclick="handleDeleteJob(${job.id})">Delete</button>
</li>
`;
});
listJobsBlock.innerHTML = html.join('')
};
const createJob = (data, callback) => {
let options = {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data)
}
fetch(listApi, options)
.then((response) => response.json())
.then(callback)
};
const handleCreateForm = () => {
let createBtn = document.querySelector('#create');
createBtn.onclick = () => {
let title = document.querySelector('input[name="title"]').value
let started_year = document.querySelector('input[name="started_year"]').value
let formData = {
title: title,
started_year: parseInt(started_year)
}
createJob(formData);
}
};
const start = () => {
getJobs(renderJob);
handleCreateForm();
};
start();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="wrapped">
<h2>List of jobs</h2>
<ul id="list-jobs">
</ul>
</div>
<div id="add_job">
<div class="input__form">
<label for="title" name="title">Title</label>
<input type="text" name="title">
</div>
<div class="input__form">
<label for="started_year" name="started_year">Started Year</label>
<input type="text" name="started_year">
</div>
<button id="create">Create</button>
</div>
<script src="./script.js"></script>
</body>
</html>当我尝试在 JS 中使用 fecth() 时，我遇到了这个问题。 我正在使用 Mock API 来练习 fetch api。我为按钮中的onclick事件定义了一个handleDeleteJob()函数来删除DOM元素并发送一个“DELETE”方法来删除数据。然而，当 id 是数字时，它只适用于 id。如果 id 是字符串，则会显示 'id' 未定义
我已经尝试了很多次来解决这个问题，但我无法弄清楚问题出在哪里？
考虑这会产生什么：
<button onclick="handleDeleteJob(${job.id})">Delete</button>
但是，当 id 是数字时，它只适用于 id。
因为当它是一个数字时，你会生成这样的代码：
<button onclick="handleDeleteJob(123)">Delete</button>
数字是语言语法的一部分，所以这里没有问题。
如果 id 是字符串，则会显示 'id' 未定义
非数值会产生什么？ 像这样的东西：
<button onclick="handleDeleteJob(thisisastring)">Delete</button>
这在语法上无效，因为您没有使用string，而是像变量一样使用它。 并且该变量未定义。
JavaScript 中字符串需要用引号引起来：
<button onclick="handleDeleteJob('${job.id}')">Delete</button>