我之前问过这个问题，但格式没有太大帮助，所以我转发了。我想要实现的逻辑是，每次单击按钮时，输入框中的值都会进入addInventory函数，创建一个新的Album，并将新创建的对象推送到products数组。在逻辑的末尾，有一个FOR of循环，它调用gridChild函数，并为数组中的每个元素创建一个新的div框。
问题是，每当我点击按钮时，什么都不会发生，而且THIS关键字也是未定义的。新对象不会被推入数组，只有在手动调用addInventory函数时才起作用。
"use strict";
// DIV NESTING USING ONLY JS
const app = document.querySelector(`.app`);
const div = `<div class="grid-child">
</div>`;
const gridContainer = `<div class="grid-container"></div>`;
// New products will be pushed in here
let products = [];
const gridParent = function() {
// app.insertAdjacentHTML(`afterbegin`, gridContainer);
app.insertAdjacentHTML(`afterbegin`, gridContainer);
}
gridParent();
const gridContainerDiv = document.querySelector(`.grid-container`);
const gridChild = function() {
gridContainerDiv.insertAdjacentHTML(`afterbegin`, div);
}
// UI logic for product form
// Will create a new album object
// Need to use a prototype and class inheritance so the component is reusable and applicable for different
// types of products.
class Album {
constructor(title, artist, price) {
this.title = title;
this.artist = artist;
this.price = price;
}
}
const addInventory = (title, artist, price) => {
const newAdd = new Album(title, artist, price);
products.push(newAdd);
console.log(this);
};
// THIS WORKS, ADDS TO THE PRODUCT ARRAY NO PROBLEM
//
addInventory(`Internet`, `Donald Glover`, 15);
addInventory(`Black Pumas`, `Black Pumas`, 31);
const productName = document.getElementById(`product-name`);
console.log(productName);
const productPrice = document.getElementById(`product-price`);
console.log(productPrice);
const inputBtn = document.getElementById(`inputBtn`);
console.log(inputBtn);
// THIS DOESNT WORK, THE THIS KEYWORD IS UNDEFINED AND DOES NOT CALL THE ADDINVENTORY FUNCTION
inputBtn.addEventListener(`click`, (e) => {
e.preventDefault();
addInventory(productName.value, ` `, +productPrice.value);
console.log(this);
})
console.log(products);
// Product list mutation needs to happen before the loop function
// so that data will be the most updated version everytime
// A div box will be created for every element in the product array
for (const everyElement of products) {
gridChild();
console.log(everyElement);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product div creator</title>
<link rel="stylesheet" href="css/style.css">
<script type="module" defer src="script.js"></script>
</head>
<body>
<div class="app">
</div>
<div class="inventory-gui">
<input type="text" id="product-name" name="product-name" data-product="info"><br>
<input type="number" id="product-price" name="product-price" data-product="info"><br><br>
<button type="submit" id="inputBtn">Make a new item</button>
</div>
</body>
</html>脚本正在做它应该做的事情。
const addInventory = (title, artist, price) => {
const newAdd = new Album(title, artist, price);
products.push(newAdd);
console.log(this);
};
addInventory(`Internet`, `Donald Glover`, 15);
在上面的脚本中，this关键字将是未定义的，因为addInventory是一个箭头函数，并且您使用的是strict mode。
inputBtn.addEventListener(`click`, (e) => {
e.preventDefault();
addInventory(productName.value, ` `, +productPrice.value);
console.log(this);
})
事件监听器的回调可以访问addInventory函数，因此单击按钮时会调用它。this关键字将在此处未定义，因为它是一个箭头函数。
`console.log(products);`
我想当你点击按钮时，你期待着上面的行再次执行。当您单击该按钮时，只会执行给事件侦听器的回调，而不会执行整个脚本。如果需要访问更新后的products数组，可以在回调中调用addInvetory函数。看看这个沙盒，我想说什么。