Javascript 如何在每次向列表中添加某个项目时，将对象属性（本例中为isbn）增加一个：？

每次我向列表中添加一些项目时，我都试图将对象属性（本例中为isbn）增加1。 我希望每个tr都有唯一的isbn（1,2,3,4…） 我尝试使用newItem.isbn++，但每次添加item时，我得到1（不是2,3,4…）。 我是JavaScript新手，我真的需要一些帮助

 //Item Class
class Item {
    constructor(isbn, item, amount, price) {
        (this.isbn = isbn), (this.item = item), (this.amount = amount), (this.price = price);
    }
}
//UI Class
class UI {
    static displayItems() {
        const storedItems = [
            {
                isbn: '1',
                item: 'Some item',
                amount: '2',
                price: '$ 2500,00'
            }
        ];

        const items = storedItems;
        items.forEach((item) => UI.addItemToList(item));
    }

    static addItemToList(item) {
        const list = document.querySelector('tbody');
        const row = document.createElement('tr');

        row.innerHTML = `
        <td>${item.isbn}</td>
        <td>${item.item}</td>
        <td>${item.amount}</td>
        <td>${item.price}</td>
        <td>
            <a href=""><i class="material-icons prefix grey-text text-darken-3">delete</i></a>
        </td>
        `;
        list.appendChild(row);
    }

    static clearFields() {
        document.querySelector('#item').value = '';
        document.querySelector('#amount').value = '';
        document.querySelector('#price').value = '';
    }
}

//Event: Display Items
document.addEventListener('DOMContentLoaded', UI.displayItems);
//Event: Add Items
document.querySelector('form').addEventListener('submit', function(e) {
    //Prevent default of submit
    e.preventDefault();
    //Get values from form
    const isbn = 0;
    const item = document.querySelector('#item').value;
    const amount = document.querySelector('#amount').value;
    const price = document.querySelector('#price').value;

    //Instatiate Item
    const newItem = new Item(isbn, item, amount, price);
    newItem.isbn++; //Here I need help!!!!!!!
    console.log(newItem);

    //Add item to UI
    UI.addItemToList(newItem);

    //Clear input fields
    UI.clearFields();
});

//项目类
类项目{
建造商（isbn、项目、金额、价格）{
（this.isbn=isbn），（this.item=item），（this.amount=amount），（this.price=price）；
}
}
//用户界面类
类用户界面{
静态显示项（）{
常数storedItems=[
{
isbn:'1'，
项目：“某些项目”，
金额：'2'，
价格：‘$2500,00’
}
];
常量项=存储数据项；
items.forEach（（item）=>UI.addItemToList（item））；
}
静态附加项列表（项）{
const list=document.querySelector（'tbody'）；
const row=document.createElement（'tr'）；
row.innerHTML=`
${item.isbn}
${item.item}
${item.amount}
${item.price}
`;
list.appendChild（行）；
}
静态clearFields（）{
document.querySelector（'#item'）。值=''；
document.querySelector（“#amount”）.value=''；
document.querySelector（“#price”）.value=”；
}
}
//事件：显示项目
document.addEventListener（'DOMContentLoaded'，UI.displayItems）；
//事件：添加项目
document.querySelector（'form'）。addEventListener（'submit'，函数（e）{
//防止默认提交
e、 预防默认值（）；
//从表单中获取值
常数isbn=0；
const item=document.querySelector（“#item”）.value；
const amount=document.querySelector（“#amount”）.value；
const price=document.querySelector（“#price”）.value；
//分期付款项目
const newItem=新项目（isbn、项目、金额、价格）；
newItem.isbn++；//这里我需要帮助！！！！！！！
console.log（newItem）；
//将项目添加到用户界面
UI.附加项列表（新项）；
//清除输入字段
UI.clearFields（）；
});

在这种情况下，您希望ISBN计数器是一个全局变量，以便在每次迭代中跟踪它。当前，每次运行该函数时都将其重置为零，因为变量的作用域是该函数

let isbn = 0;

// other code...

document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    const item = document.querySelector('#item').value;
    const amount = document.querySelector('#amount').value;
    const price = document.querySelector('#price').value;

    newISBN = isbn++; // notice here we are incrementing the global variable

    const newItem = new Item(newISBN, item, amount, price); // here we are using this new incremented value to create your item

    UI.clearFields();
});

---

在这种情况下，您希望您的ISBN计数器是一个全局变量，以便您可以在每次迭代中跟踪它。当前，每次运行该函数时都将其重置为零，因为变量的作用域是该函数

let isbn = 0;

// other code...

document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    const item = document.querySelector('#item').value;
    const amount = document.querySelector('#amount').value;
    const price = document.querySelector('#price').value;

    newISBN = isbn++; // notice here we are incrementing the global variable

    const newItem = new Item(newISBN, item, amount, price); // here we are using this new incremented value to create your item

    UI.clearFields();
});

---

一些有状态的助手可能是一个解决方案。即

const createNewISBN = (initial = 0) => {
    let isbn = initial;

    return function newIsbn() {
        isbn += 1;
        return isbn;
    }
}

const newIsbn = createNewIsbn(); // this will initiate new pool

然后在稍后的代码中：

document.querySelector('form').addEventListener('submit', function(e) {
    //Prevent default of submit
    e.preventDefault();
    //Get values from form
    const isbn = newIsbn(); // here no longer 0
    const item = document.querySelector('#item').value;
    const amount = document.querySelector('#amount').value;
    const price = document.querySelector('#price').value;

    //Instatiate Item
    const newItem = new Item(isbn, item, amount, price);
    // newItem.isbn++; //Here I need help!!!!!!! <-- this you don’t need anymore
    console.log(newItem);

    //Add item to UI
    UI.addItemToList(newItem);

    //Clear input fields
    UI.clearFields();
});

document.querySelector（'form'）。addEventListener（'submit'，函数（e）{
//防止默认提交
e、 预防默认值（）；
//从表单中获取值
const isbn=newIsbn（）；//此处不再为0
const item=document.querySelector（“#item”）.value；
const amount=document.querySelector（“#amount”）.value；
const price=document.querySelector（“#price”）.value；
//分期付款项目
const newItem=新项目（isbn、项目、金额、价格）；
//newItem.isbn++；//这里我需要帮助！！！！！！！一些有状态的帮助程序可能是一个解决方案。例如

const createNewISBN = (initial = 0) => {
    let isbn = initial;

    return function newIsbn() {
        isbn += 1;
        return isbn;
    }
}

const newIsbn = createNewIsbn(); // this will initiate new pool

然后在稍后的代码中：

document.querySelector('form').addEventListener('submit', function(e) {
    //Prevent default of submit
    e.preventDefault();
    //Get values from form
    const isbn = newIsbn(); // here no longer 0
    const item = document.querySelector('#item').value;
    const amount = document.querySelector('#amount').value;
    const price = document.querySelector('#price').value;

    //Instatiate Item
    const newItem = new Item(isbn, item, amount, price);
    // newItem.isbn++; //Here I need help!!!!!!! <-- this you don’t need anymore
    console.log(newItem);

    //Add item to UI
    UI.addItemToList(newItem);

    //Clear input fields
    UI.clearFields();
});

document.querySelector（'form'）。addEventListener（'submit'，函数（e）{
//防止默认提交
e、 预防默认值（）；
//从表单中获取值
const isbn=newIsbn（）；//此处不再为0
const item=document.querySelector（“#item”）.value；
const amount=document.querySelector（“#amount”）.value；
const price=document.querySelector（“#price”）.value；
//分期付款项目
const newItem=新项目（isbn、项目、金额、价格）；
//newItem.isbn++；//这里我需要帮助！！！！！！！这可能不会在这里发生，但是
isbn
向所有人公开并且可以自由更改（即再次重置为
0
）。这可能不会在这里发生，但是
isbn
向所有人公开并且可以自由更改（即再次重置为
0
）。