时间戳

首页 > 解决方案 > JavaScript 无法正确检测页面上的元素

javascript - JavaScript 无法正确检测页面上的元素

问题描述

给定的代码不起作用，我不知道为什么，当我写 console.log 这个控制台显示值，然后返回错误“Uncaught TypeError: Cannot read property 'innerHTML' 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);
}

有什么问题？

标签： javascriptfor-loopvariablesconsole.log

解决方案

这会让你更接近：

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);
}

推荐阅读