Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialmjugi
9,448 Pointshelp me with this code please
the input value doesn't appear in the table, any one can help
<div>
<table>
<thead>
<caption>Employees</caption>
<tr class="th1">
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Job role</th>
<th scope="col">E-mail</th>
</tr>
</thead>
<tfoot>
<td colspan="4">The Name, age and job role for the employees in our company</td>
</tfoot>
<tbody>
<tr>
<th scope="row">Mahmoud Risheq</th>
<td>23</td>
<td>Web developer</td>
<td>Mahmoud@example.com</td>
</tr>
<tr>
<th scope="row">Tariq Ziad</th>
<td>22</td>
<td>Unemployed</td>
<td>Tariq@example.com</td>
</tr>
<tr>
<th scope="row">Yazeed Asa'ad</th>
<td>24</td>
<td>Web developer</td>
<td>yazeed@example.com</td>
</tr>
<tr>
<th scope="row">Mohammad Derar</th>
<td>24</td>
<td>Web developer</td>
<td>mohammad@example.com</td>
</tr>
<tr class="th2">
<th scope="row">Khalid Gaara</th>
<td>27</td>
<td>marketing</td>
<td>Khalid@example.com</td>
</tr>
<div id="div">
</div>
</tbody>
</table>
</div>
const submit = document.querySelector('.form-btn');
submit.addEventListener ('click', () => {
const nameInput = document.getElementById('name');
const ageInput = document.getElementById('age');
const jobInput = document.getElementById('job-role');
const emailInput = document.getElementById('e-mail');
const textareaInput = document.getElementById('bio');
const div = document.getElementById('div');
if(nameInput.value !== '' && ageInput.value !== '' && jobInput.value !== '' && emailInput.value !== '') {
let code =
`<tr>
<th scope="row">${nameInput.value}</th>
<td>${ageInput.value}</td>
<td>${jobInput.value}</td>
<td>${emailInput.value}</td>
</tr> `;
div.innerHTML = code;
} else {
alert('You left some empty spaces, Do it again')
}
});
1 Answer
Steven Parker
231,172 PointsThis code doesn't seem complete, in particular the JavaScript portion begins by looking for an HTML element with the class "form-btn" but there isn't one.
Perhaps the best way to illustrate a problem on the forum is to use a Workspace to build the project, and then you can make a snapshot of your workspace and post the link to it here.
mjugi
9,448 Pointsmjugi
9,448 Pointsthis is the rest of the html code
or you can see the whole project https://github.com/YazeedAsaad0/Table
Steven Parker
231,172 PointsSteven Parker
231,172 PointsIt is not correct HTML syntax to place a div directly inside a table body. That element should be a table row (tr) instead.
The event handler can then write just the contents (th, td's) into the existing table row.
For future questions, consider porting your project into a Treehouse Workspace, which would allow you to make a snapshot and post the link to it here. That greatly simplifies replicating the issue.
mjugi
9,448 Pointsmjugi
9,448 Pointsthank you , the issue was the button type attribute was submit when i changed it to button it did work
Steven Parker
231,172 PointsSteven Parker
231,172 PointsChanging the button type will prevent your form from being sent back to the server, wasn't that the whole point of the form? But it also still doesn't fix the HTML syntax issue, and other browsers will still exhibit the display problem (I tested it on Chrome, and there was no improvement).
The permitted content for a <tbody> element is zero or more <tr> elements. There should be no other direct children of a <tbody> (such as a <div>). For more details, see the MDN page on <tbody>. I tested the fix I proposed previously and confirmed that it does the job.
mjugi
9,448 Pointsmjugi
9,448 Pointsyes , i had to change the <div> to <tr> but didn't work so i changed the type attribute to button then it did work