Hola, cuando trato de obtener el elemento tbody en JavaScript, aparece el error de que es nulo . Pero cada vez que uso el mismo método para obtener el elemento, pero en un archivo diferente, funciona perfectamente.
He intentado obtener el elemento por id y clase, pero nada parece funcionar.
Aquí está mi HTML :
<table class="table table-striped" > <thead> <tr> <th scope="col">ID</th> <th scope="col">Name</th> <th scope="col">Photo</th> <th scope="col">Price</th> <th scope="col">Operation</th> </tr> </thead> <tbody> </tbody> </table>y mi js
data_base.body.appendChild(tr); const data_base = { body: document.getElementsByTagName("tbody")[0], }así es como puedes obtener tu elemento tbody
const tbody = document.querySelector('tbody');así que en lugar de
data_base.body.appendChild(tr);usar :
tbody.appendChild(tr);¿Puede ser más claro y decir dónde intenta llegar a su elemento tbody?
por cierto puedes reemplazar
const tr = document.createElement("tr"); const td_id = document.createElement("td"); const td_name = document.createElement("td"); const image = document.createElement("img"); const td_image = document.createElement("td"); td_image.appendChild(image); const td_price = document.createElement("td"); const td_operation = document.createElement("td"); const operation = document.createElement("button"); td_operation.appendChild(operation); td_id.textContent = i; td_name.textContent = data_base.naming; image.src = data_base.url; image.alt = "Couldn't load image"; td_price.textContent = data_base.price; operation.setAttribute("click", "sitDown()"); tr.appendChild(td_id); tr.appendChild(td_name); tr.appendChild(td_image); tr.appendChild(td_price); tr.appendChild(td_operation); data_base.body.appendChild(tr);con
const tr = document.createElement("tr"); tr.innerHTML = ` <td>${i}</td> <td>${data_base.naming}</td> <td><img src="${data_base.url}" alt="Couldn't load image"></td> <td>${data_base.price}</td> <td><button></button></td> `; data_base.body.append(tr);para que su código sea más legible
y no agregue un detector de eventos como atributo como lo hizo aquí
operation.setAttribute("click", "sitDown()");En la última línea de newTable() , intenta acceder a <tbody> con la línea data_base.body . Sin embargo, no es así como funciona el acceso .
Intente cambiar la línea a data_base.tBodies[0] .
Tal vez esté pensando en document.body para una propiedad con el mismo nombre.