通过 JavaScript 问题渲染 HTML 卡

Question

So basically what's the idea of my code: user inputs image URL, price, and description and click's 'create card' and then it should create a card.所以基本上我的代码的想法是什么：用户输入图像 URL、价格和描述，然后单击“创建卡”，然后它应该创建一张卡。

All products that user create are saved in the 'productsArr' array;用户创建的所有产品都保存在“productsArr”数组中；

After the user click's create card it should render HTML from the 'productsArr' array and display all the cards, but for some reason, it only creates a single card and then copies's it into HTML?用户点击创建卡片后，它应该从“productsArr”数组中渲染 HTML 并显示所有卡片，但由于某种原因，它只创建了一张卡片，然后将其复制到 HTML 中？

May someone please tell me what's wrong with my JS code?有人可以告诉我我的JS代码有什么问题吗？

PS sorry for my English 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

As you are pushing the products in the productsArr .当您在 productsArr 中推送productsArr时。 So instead of passing the productsArr to render function pass the current product to render function.因此，不要传递productsArr来render function，而是传递当前产品来渲染 function。 In this way, you don't need to use the for loop in the render function and you can use the productsArr for future use as well.这样，您不需要在render function 中使用for循环，您也可以使用productsArr以供将来使用。

So your function will look like:所以你的 function 看起来像：

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

And your render function will become:您的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 卡

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-03-21 10:01:34

通过 JavaScript 问题渲染 HTML 卡

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-03-21 10:01:34

解决方案1
1 已采纳 2021-03-21 10:01:34