我正在嘗試從表中獲取值,但出現此錯誤Uncaught TypeError: Cannot read properties of undefined (reading 'textContent')有人可以幫忙解決嗎?
js
const cards = document.getElementById('cards')
const templateCarrito = document.getElementById('template-carrito').content
const fragment = document.createDocumentFragment()
let carrito = {}
cards.addEventListener('click', e => {
addCarrito(e)
})
const pintarCards = toolList => {
toolList.forEach(producto => {
templateCard.querySelectorAll('td')[0].textContent = producto.tbl_herramienta_ID
templateCard.querySelectorAll('td')[1].textContent = producto.tbl_herramienta_NOMBRE
templateCard.querySelectorAll('td')[2].textContent = producto.tbl_herramienta_DESCRIPCION
templateCard.querySelector('.btn-success').dataset.id = producto.tbl_herramienta_ID
const clone = templateCard.cloneNode(true)
fragment.appendChild(clone)
})
cards.appendChild(fragment)
}
// agregar al arrito
const addCarrito = e => {
if (e.target.classList.contains('btn-success')) {
console.log(e.target.dataset.id)
setCarrito(e.target.parentElement)
}
e.stopPropagation()
}
const setCarrito = objeto => {
const producto = {
id: objeto.querySelector('.btn-success').dataset.id,
nombre: objeto.querySelectorAll('td')[1].textContent,
descripcion: objeto.querySelectorAll('td')[2].textContent,
cantidad: 1
}
console.log(producto)
}
我有一個錯誤 nombre: objeto.querySelectorAll('td')[1].textContent, descripcion: objeto.querySelectorAll('td')[2].textContent,
uj5u.com熱心網友回復:
templateCard.querySelectorAll('td')似乎沒有給你預期的那么多結果,因此呼叫.textContent失敗(三個元素之一似乎是null)。您可以嘗試記錄該選擇器的結果以查看結果元素是什么。
uj5u.com熱心網友回復:
這是我的 html
<table class="table table-bordered" width="100%">
<thead>
<tr>
<th scope=" col">#</th>
<th scope="col">Nombre</th>
<th scope="col">Descripción</th>
<th scope="col">Acción</th>
</tr>
</thead>
<tbody id="cards">
</tbody>
</table>
<template id="template-card">
<tr>
<td></td>
<td id="nombre"></td>
<td></td>
<td><button class="btn btn-success"><i
class="fas fa-plus"></i></button></td>
</tr>
</template>
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/354530.html
標籤:javascript 数组 打字稿 文本 html-table
上一篇:如何使用本地存盤/cookies保存javascript函式輸出?或任何其他方式?
下一篇:矩陣方程的JS正則運算式
