通过 JavaScript 问题呈现 HTML 卡片

Question

基本上我的代码的想法是什么：用户输入图片 URL、价格和描述，然后点击 'create card' 然后它应该会创建一张卡片。

用户创建的所有产品都保存在'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>

Answer 1

由于您正在推productsArr中的产品。因此，不是将 productsArr 传递给 render 函数，而是将当前产品传递给渲染函数。这样就不需要在render函数中使用for循环，以后使用productsArr也可以。

因此您的函数将如下所示：

function pushIt() {
    getInfo();
    productsArr.push(product);
    render(product);
    product = {
        image: null,
        price: null,
        description: null,
        id: null
    }
}

您的 render 函数将变为：

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 卡片

Rendering HTML cards via JavaScript problem

javascript

html

css

rendering