英文:
Object UNDEFINED Error for existing Dom Objects
问题
以下是您要翻译的内容：
"Dom is showing the Nodelist[i].properties of document.querySelectorAll("tr") as 'UNDEFINED' eventhough they exist as OBJECT's and can be accessed and iterated over. Specifically for .innerText ,the node text gets returned as string but still the Dom gives an Undefined error. Why is the Dom not recognising the object type and its properties?
CONSOLE:
querySelectorAll("tr") dtype,string,object = object,[object NodeList],NodeList[]
rowArray[0] = (string), PurchaseTime Expiry Product Temperature Color
tables1 copy.html:66 rowArray[1] = (string), 1 12-May-2023 13:29:09 18-May-2023 Apple 40 red
tables1 copy.html:66 rowArray[2] = (string), 2 12-May-2023 13:31:08 18-May-2023 Banana 10 black
tables1 copy.html:64 Uncaught TypeError: Cannot read properties of undefined (reading 'innerText')
at tablesCssAutoWidth (tables1 copy.html:64:27)
Code(+Table) :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th>PurchaseTime</th>
<th>Expiry</th>
<th>Product</th>
<th>Temperature</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>12-May-2023 13:29:09</td>
<td>18-May-2023</td>
<td>Apple</td>
<td>40</td>
<td>red</td>
</tr>
<tr>
<th>2</th>
<td>12-May-2023 13:31:08</td>
<td>18-May-2023</td>
<td>Banana</td>
<td>10</td>
<td>black</td>
</tr>
</tbody>
</table>
</body>
</html>
<script>
window.onload = function tablesCssAutoWidth(){
const tableNodelist_tr = document.querySelectorAll("tr");
console.log("querySelectorAll(tr) dtype = %s,%s,%o" ,typeof(tableNodelist_tr),tableNodelist_tr,tableNodelist_tr)
// const tableNodelist_tr = document.querySelectorAll("tr");
var row_allArray = []
for (let i = 0; i <= tableNodelist_tr.length; i++) {
let row_idata = tableNodelist_tr[i]
row_idata = row_idata.innerText
let row_idtype = typeof(row_idata)
console.log("rowArray[%s] = (%s), %s",i,row_idtype,row_idata)
row_iArray = row_idata.replace(/\s/g, ",").split(',');
row_allArray.concat( row_iArray)}
console.log("querySelectorAll(tr)[1].innerText dtype = %s,%s" ,typeof(tableNodelist_tr.innerText[1]),tableNodelist_tr.innerText[1])
console.log("row_allArray= %s",row_allArray)
for (let i = 1; i <= tableNodelist_tr.length; i++) {
if(
parseInt(row_allArray[i][5]) <20 |
row_iArray[i][6] == "black" ){
row_iArray[i].style.backgroundColor = "red";}
}
}
</script>
英文:
Dom is showing the Nodelist[i].properties of document.querySelectorAll("tr") as 'UNDEFINED' eventhough they exist as OBJECT's and can be accessed and iterated over.
Specifically for .innerText ,the node text gets returned as string but still the Dom gives an Undefined error.
Why is the Dom not recognising the object type and its properties?
CONSOLE:
querySelectorAll("tr") dtype,string,object = object,[object NodeList],NodeList[]
rowArray[0] = (string), PurchaseTime Expiry Product Temperature Color
tables1 copy.html:66 rowArray[1] = (string), 1 12-May-2023 13:29:09 18-May-2023 Apple 40 red
tables1 copy.html:66 rowArray[2] = (string), 2 12-May-2023 13:31:08 18-May-2023 Banana 10 black
tables1 copy.html:64 Uncaught TypeError: Cannot read properties of undefined (reading 'innerText')
at tablesCssAutoWidth (tables1 copy.html:64:27)
Code(+Table) :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th>PurchaseTime</th>
<th>Expiry</th>
<th>Product</th>
<th>Temperature</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>12-May-2023 13:29:09</td>
<td>18-May-2023</td>
<td>Apple</td>
<td>40</td>
<td>red</td>
</tr>
<tr>
<th>2</th>
<td>12-May-2023 13:31:08</td>
<td>18-May-2023</td>
<td>Banana</td>
<td>10</td>
<td>black</td>
</tr>
</tbody>
</table>
</body>
</html>
<script>
window.onload = function tablesCssAutoWidth(){
const tableNodelist_tr = document.querySelectorAll("tr");
console.log("querySelectorAll(tr) dtype = %s,%s,%o" ,typeof(tableNodelist_tr),tableNodelist_tr,tableNodelist_tr)
// const tableNodelist_tr = document.querySelectorAll("tr");
var row_allArray = []
for (let i = 0; i <= tableNodelist_tr.length; i++) {
let row_idata = tableNodelist_tr[i]
row_idata = row_idata.innerText
let row_idtype = typeof(row_idata)
console.log("rowArray[%s] = (%s), %s",i,row_idtype,row_idata)
row_iArray = row_idata.replace(/\s/g, ",").split(',');
row_allArray.concat( row_iArray)}
console.log("querySelectorAll(tr)[1].innerText dtype = %s,%s" ,typeof(tableNodelist_tr.innerText[1]),tableNodelist_tr.innerText[1])
console.log("row_allArray= %s",row_allArray)
for (let i = 1; i <= tableNodelist_tr.length; i++) {
if(
parseInt(row_allArray[i][5]) <20 |
row_iArray[i][6] == "black" ){
row_iArray[i].style.backgroundColor = "red";}
}
}
</script>
答案1
得分: 0
Cannot read properties of undefined错误来自于for循环中的条件错误：
for (let i = 0; i < tableNodelist_tr.length; i++) {
在这段代码中，迭代器将遍历0，1，2和3，但是tableNodelist_tr只有索引到2的位置。这意味着以下语句：
let row_idata = tableNodelist_tr[i] // = tableNodelist_tr[3]
会被评估为undefined。因此，在此之后的语句：
row_idata = row_idata.innerText // = undefined.innerText
试图读取undefined的innerText属性，这是无效的。
解决方法是将条件从小于或等于 (<=) 调整为 小于 (<)：
for (let i = 0; i < tableNodelist_tr.length; i++) {
英文:
The Cannot read properties of undefined error comes from seems to be an incorrect condition in the for loop:
for (let i = 0; i <= tableNodelist_tr.length; i++) {
With this code, the iterator will go through 0, 1, 2 and 3, but the tableNodelist_tr only has indices up to 2. This means that the following statement:
let row_idata = tableNodelist_tr[i] // = tableNodelist_tr[3]
Evaluates to undefined. Thus, the following statement after:
row_idata = row_idata.innerText // = undefined.innerText
Tries to read the innerText property of undefined which is invalid.
The solution is to adjust the condition from less than or equal to (<=) to less than (<):
for (let i = 0; i < tableNodelist_tr.length; i++) {
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
window.onload = function tablesCssAutoWidth() {
const tableNodelist_tr = document.querySelectorAll("tr");
console.log("querySelectorAll(tr) dtype = %s,%s,%o", typeof(tableNodelist_tr), tableNodelist_tr, tableNodelist_tr)
// const tableNodelist_tr = document.querySelectorAll("tr");
var row_allArray = []
for (let i = 0; i < tableNodelist_tr.length; i++) {
let row_idata = tableNodelist_tr[i]
row_idata = row_idata.innerText
let row_idtype = typeof(row_idata)
console.log("rowArray[%s] = (%s), %s", i, row_idtype, row_idata)
row_iArray = row_idata.replace(/\s/g, ",").split(',');
row_allArray.concat(row_iArray)
}
console.log("querySelectorAll(tr)[1].innerText dtype = %s,%s", typeof(tableNodelist_tr.innerText[1]), tableNodelist_tr.innerText[1])
console.log("row_allArray= %s", row_allArray)
for (let i = 1; i <= tableNodelist_tr.length; i++) {
if (
parseInt(row_allArray[i][5]) < 20 |
row_iArray[i][6] == "black") {
row_iArray[i].style.backgroundColor = "red";
}
}
}
<!-- language: lang-html -->
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th>PurchaseTime</th>
<th>Expiry</th>
<th>Product</th>
<th>Temperature</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>12-May-2023 13:29:09</td>
<td>18-May-2023</td>
<td>Apple</td>
<td>40</td>
<td>red</td>
</tr>
<tr>
<th>2</th>
<td>12-May-2023 13:31:08</td>
<td>18-May-2023</td>
<td>Banana</td>
<td>10</td>
<td>black</td>
</tr>
</tbody>
</table>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论