I asked this question earlier but the formatting wasnt too helpful so im reposting. The logic that I wanted to implement was everytime the button is clicked, the value from the input boxes goes to the addInventory function, creates a new Album, and pushed the newly created object to the products array. At the end of the logic, there is a FOR OF loop that invokes the gridChild function and creates a new div box for every element in the array.
The issue is that whenever I click the button, nothing happens and also the THIS keyword is undefined. The new object doesnt get pushed into the array and only works when the addInventory function is a called manually.
HTML
<!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> Javascript
"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); } 
没有评论:
发表评论