Hello so when I try to get the tbody element in JavaScript I get the error that it is null But whenever I use the same method to get the element but in a different file it works perfectly.
I have tried getting the element by id and class but nothing seems to be working.
Here is my 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>
And my JS
data_base.body.appendChild(tr);
const data_base = {
body: document.getElementsByTagName("tbody")[0],
}
this is how u can get ur tbody element
const tbody = document.querySelector('tbody');
so instead of
data_base.body.appendChild(tr);
use :
tbody.appendChild(tr);
can u please be more clear and say where u try to get to ur tbody element?
by the way u can replace
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);
with
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);
to make your code more readable
and dont add an event listener as attribute as u did here
operation.setAttribute("click", "sitDown()");
In the last line of newTable() you try to access the <tbody> with the line
data_base.body. However, that’s not how accessing it works.
Try changing the line to data_base.tBodies[0].
Perhaps you’re thinking of document.body for a property with the same name.