通过 JavaScript 问题渲染 HTML 卡
[英]Rendering HTML cards via JavaScript problem
问题描述
所以基本上我的代码的想法是什么：用户输入图像 URL、价格和描述，然后单击“创建卡”，然后它应该创建一张卡。
用户创建的所有产品都保存在“productsArr”数组中；
用户点击创建卡片后，它应该从“productsArr”数组中渲染 HTML 并显示所有卡片，但由于某种原因，它只创建了一张卡片，然后将其复制到 HTML 中？
有人可以告诉我我的JS代码有什么问题吗？
PS对不起我的英语
let productsArr = []; let product = { image: null, price: null, description: null, id: null } function getInfo() { product.image = document.getElementById("image").value; product.price = document.getElementById("price").value; product.description = document.getElementById("description").value; product.id = document.getElementById("id").value; } function render() { let arr = productsArr; for (let i = 0; i < arr.length; i++) { let str = ''; str = ' <div class="item_body" data-id="i">\n' + ' <img id="img" src="' + arr[i].image + '" alt="#">\n' + ' <div class="description">' + arr[i].description + '</div>\n' + ' <div class="price">' + arr[i].price + '</div>\n' + ' <input type="button" value="В коризну">' + ' </div>' document.getElementById('all_products').innerHTML += str; arr = []; } } function pushIt() { getInfo(); productsArr.push(product); render(productsArr); product = { image: null, price: null, description: null, id: null } } function sortByPrice() { productsArr.sort((a, b) => parseFloat(a.price) - parseFloat(b.price)); } console.log(productsArr)
.container { max-width: 2000px; margin: 0 auto; display: flex; }.form { height: 420px; width: 30%; padding: 50px; background: #73AFBA; border-radius: 10%; } label { display: flex; flex-direction: column; }.products-section { width: 70%; }.products-section-header { display: flex; justify-content: center; align-items: center; }.products { display: flex; flex-wrap: wrap; justify-content: space-around; margin-left: 50px; } input { width: 100%; margin: 10px 0; }.item_body { width: 30%; padding: 10px; margin: 20px; height: 400px; border: #1C2E3D solid 1px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; text-align: center; }.item_body img { max-width: 80%; }
<.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="styles.css" rel="stylesheet"> <title>Title</title> </head> <body> <div class="container"> <div class="form"> <label> <p>Image</p> <input id="image" type="text" name="image"> <p>Price</p> <input id="price" type="text" name="price"> <p>Description</p> <input id="description" type="text" name="description"> <p>Id</p> <input id="id" type="text" name="id"> <input type="submit" value="Create card" onclick="pushIt()"> </label> </div> <div class="products-section"> <div class="products-section-header"> <input type="button" name="sortByPrice" value="Sort by price" onclick="sortByPrice()"> </div> <div class="products" id='all_products'></div> </div> </div> <script src="script.js"></script> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2021-03-21 10:01:34
当您在 productsArr 中推送productsArr时。 因此，不要传递productsArr来render function，而是传递当前产品来渲染 function。 这样，您不需要在render function 中使用for循环，您也可以使用productsArr以供将来使用。
所以你的 function 看起来像：
function pushIt() {
getInfo();
productsArr.push(product);
render(product);
product = {
image: null,
price: null,
description: null,
id: null
}
}
您的render function 将变为：
function render(product) {
let str = '';
str = ' <div class="item_body" data-id="i">\n' +
' <img id="img" src="' + product.image + '" alt="#">\n' +
' <div class="description">' + product.description + '</div>\n' +
' <div class="price">' + product.price + '</div>\n' +
' <input type="button" value="В коризну">' +
' </div>'
document.getElementById('all_products').innerHTML += str;
}
通过javascript在html中添加卡片
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.