ReferenceError: b87b is not defined at HTMLButtonElement.onclick

This is the JSON file for Data

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>

I'm struggling with the problem when trying to use the fecth() in JS. I'm using the Mock API to practice with the fetch api. I defined a handleDeleteJob() function for onclick event in button to remove the DOM element and send a "DELETE" method to delete data. However it just work with the id when it is a number. With the id is a string, it'll show that 'id' is not defined

I have try many times to fix this problem but I can not figure out what is the problem come from?

Solution

Consider what this will produce:

<button onclick="handleDeleteJob(${job.id})">Delete</button>

However it just work with the id when it is a number.

Because when it's a number, you're producing code like this:

<button onclick="handleDeleteJob(123)">Delete</button>

Numbers are part of the language syntax so no problems here.

With the id is a string, it'll show that 'id' is not defined

What does a non-numeric value produce? Something like this:

<button onclick="handleDeleteJob(thisisastring)">Delete</button>

This is not syntactically valid because you're not using a string, you're using it as though it were a variable. And that variable is not defined.

Strings need to be wrapped in quotes in JavaScript:

<button onclick="handleDeleteJob('${job.id}')">Delete</button>