0

Нужна помощь, не знаю в чём проблема. Посмотрел через debug, после обновления на функцию uploadHtml приходит пустой массив, хотя в LS лежат данные.

const of = document.querySelector('.of')
let artArray = []
!localStorage.artArray ? artArray = [] : artArray = JSON.parse(localStorage.getItem('art'))
const addBtn = document.querySelector('.add__art')
addBtn.addEventListener('click', () => {
    const artImg = document.querySelector('.add__img').value.match(/\w+\.[png, jpg]+/)
    const artTitle = document.querySelector('.add__title').value
    const artDescr = document.querySelector('.add__descr').value
    const artWidth = parseInt(document.querySelector('.add__width').value)
    const artHeight = parseInt(document.querySelector('.add__height').value)
    const artPrice = parseInt(document.querySelector('.add__price').value)
    artArray.push(new art(artImg, artTitle, artDescr, artWidth, artHeight, artPrice))
    updateLs()
    updateHtml()
    document.querySelector('.add__width').value = ''
    document.querySelector('.add__img').value = ''
    document.querySelector('.add__height').value = ''
    document.querySelector('.add__price').value = ''
    document.querySelector('.add__title').value = ''
    document.querySelector('.add__descr').value = ''
})
function art(img, title, descr, width, height, price) {
    this.img = img
    this.title = title
    this.descr = descr
    this.width = width
    this.height = height
    this.price = price
}
const updateHtml = () => {
    of.innerHTML = ""
    if (artArray.length > 0) {
        artArray.forEach((item, index) => {
            of.innerHTML += createArt(item, index)
        })
    }
}
updateHtml()

const updateLs = () => {
    localStorage.setItem('art', JSON.stringify(artArray))
}
const createArt = (art, index) => {
    return `
        <div class="out">
            <h2 class="out__title">Название: ${art.title}</h2>
            <p class="out__descr">Описание: ${art.descr}</p>
            <p class="out__size">Размер: ${art.width} X ${art.height}</p>
            <p class="out__price">Цена: ${art.price} руб.</p>
            <button onclick="removeArt(${index}) "class="out__remove">Удалить карточку</button>
        </div>
    `
}

const removeArt = index => {
    artArray.splice(index, 1)
    updateLs()
    updateHtml()
}

1 ответ 1

0

Ошибка в условии

!localStorage.artArray ? ...

Должно быть

!localStorage.getItem('art') ? ...
2
  • Lothric, не сработало. 12 июл 2022 в 6:20
  • Нужно было помимо, !localStorage.getItem('art') ?, ещё и стрелочную в обычную переписать function createArt(art, index) 12 июл 2022 в 6:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.