JavaScript неправильно определяет элементы на странице - PullRequest
Новая
       3

JavaScript неправильно определяет элементы на странице

0 голосов
/ 26 февраля 2020

Данный код не работает, я не знаю, почему, когда вместо добавления в переменную запроса я пишу console.log, эта консоль отображает значения, а затем возвращает ошибку "Uncaught TypeError: Cannot read property 'inner HTML 'of undefined "

let editProduct = (id) => {
    let length = sessionStorage.getItem("valuesArray").length;
    let query = "UPDATE `products` SET id='"+id+"', ";
    for(let i = 0; i < length; i++){
        console.log(document.querySelectorAll("label")[i].innerHTML);
    }
    alert(query);
}

Что может быть не так?

Ответы [ 2 ]

0 голосов
/ 26 февраля 2020

попробуйте проверить значенияМассив это какой-либо массив или не применять функцию длины, чтобы поставить правильный конец l oop

   let length = sessionStorage.getItem("valuesArray").length
0 голосов
/ 26 февраля 2020

Это приблизит вас: 

const editProduct = id => {
    const length = sessionStorage.getItem("valuesArray").length;
    let query = "UPDATE `products` SET id='"+id+"', ";
    // querySelectorAll returns a NodeList. Convert to Array:
    const labels = Array.from(document.querySelectorAll("label"))
    const labelsText = labels.map(label => label.innerHTML)
    console.log(labels.join(', '))
    alert(query);
}

Проблема с вашим кодом заключается в том, что вы выполняете итерацию, используя длину массива, полученную из localstorage, но нет гарантии, что длина этого массива такое же, как количество элементов метки на странице, и кажется, что в массиве больше элементов, чем элементов метки.

Вместо этого следует перебрать коллекцию, возвращаемую document.querySelectorAll("label").

Я рекомендую вам выучить Array.map и Array.filter. Они безопаснее и их легче рассуждать, чем циклы.

Ваше намерение неясно в вашем коде, но если вы хотите "получить количество элементов метки, равное Math.min(labels.length, valuesArray.length)", то вы хотите сделать что-то вроде: 

const editProduct = id => {
    const length = sessionStorage.getItem("valuesArray").length;
    let query = "UPDATE `products` SET id='"+id+"', ";
    const labels = Array.from(document.querySelectorAll("label")) || [];

    const numberOfElementsToGet = Math.min(labels.length, length) - 1;
    const elementsToGet = labels.slice(0, numberOfElementsToGet)
    const labelsText = elementsToGet.map(label => label.innerHTML)

    console.log(labels.join(', '))
    alert(query);
}
...