Как передать параметры в функцию и отобразить их с помощью HTML - PullRequest
Новая
       5

Как передать параметры в функцию и отобразить их с помощью HTML

0 голосов
/ 22 июня 2019

Я делаю корзину для покупок с использованием javascript для локального хранилища, и на прошлой неделе я уже задавал похожий вопрос, в котором я частично решил свою проблему, но мне пришлось сделать перерыв, и теперь я вернулся, но застрялна эту проблему пару дней.Я думал, что это будет работать, но это не так.И нет никаких ошибок. 

function addToCartClicked(event) {
    var button = event.target
    var shopItem = button.parentElement.parentElement
    var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
    var price = shopItem.getElementsByClassName('price')[0].innerText
    var imageSrc = shopItem.getElementsByClassName('image')[0].src
    console.log(title, price, imageSrc)
    //var Item =
    //{
        //title: title,
        //price: price,
        //image: imageSrc

        //var title = title;
        //var price = price;
        //var imageSrc = imageSrc
    //}
    //var item = new Item(title, price, imageSrc)
    //var item = new Item(title, price, imageSrc)

    var product = [
        {
            "title": title,
            "price": price,
            "image": imageSrc
        }
    ]
    var pods = JSON.parse(localStorage.getItem("item")) || []
    pods.push(product)
    localStorage.setItem("item" ,JSON.stringify(pods))
    displayCart(title, price, imageSrc)
    saveCart()
}

function loadCart() {
    let listItems = JSON.parse(localStorage.getItem("item"));
    for (var i = 0; i < localStorage.length; i++){
        displayCart(listItems[i]);
    }
}


function displayCart(listItems) {
    //var item = JSON.parse(localStorage.getItem("item"))[0]
    //pods[0].title = title;
    //pods[0].price = price;
    //pods[0].imageSrc = imageSrc;
    listItems.title = title;
    listItems.price = price;
    listItems.imageSrc = imageSrc;
    var cartRow = document.createElement('div')
    cartRow.classList.add('cart-row')
    var cartItems = document.getElementsByClassName('cart-items')[0]
    var cartRowContents = `
        <div class="cart-row">
            <div class="cart-column cart-item" style="padding-top: 1%"><img class="image" style="width: 25%;" src="${imageSrc}" alt="" ><h2 style="padding-left: 5%">${title}</h2></div>
            <div class="cart-column cart-price" style="padding-top: 1%"><h2 class="price">${price}</h2></div>
            <form class="cart-column cart-quantity"><input class="quantity" type="number" id="number" value="1" style="width: 15%; margin-left: auto; margin-right: 60%" /></form>
            <span style="margin-top: auto; margin-bottom: auto;">
                  <button class="btn btn-primary shop-item-button " type="button">Remove</button>
            </span>
        </div>`

    cartRow.innerHTML = cartRowContents
    cartItems.append(cartRow)
    cartRow.getElementsByClassName('btn-primary')[0].addEventListener('click', RemoveCartItem)
    saveCart()
}

Я ожидаю, что отображаемая корзина сможет извлечь заголовок, цену, imageScr и затем отобразить это в HTML на странице.

...