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 trial

JavaScript Interacting with the DOM Traversing the DOM Traversing up the DOM with parentNode

Posted by mjugi
mjugi
9,448 Points

help 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
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

This 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
mjugi
9,448 Points

this is the rest of the html code 

<div class="form">
     <form action="mahmoud.html" method="post">

        <h1>Add Employees</h1>

        <fieldset>

             <label for="name">Employee Name</label>
             <input type="text" id="name" name="user_name" class"input1">

             <label for="age">Employee Age</label>
             <input type="text" id="age" name="user_age" class"input2">

             <label for="job-role">Employee Job role</label>
             <input type="text" id="job-role" name="user_job-role" class"input3">

             <label for="e-mail">Employee Email</label>
             <input type="email" id="e-mail" name="user_job-role" class"input4">

          </fieldset>

          <fieldset class="field">

              <legend>The Employee info</legend>
              <textarea id="bio" name="user_bio" class"input5"></textarea>

              <button type="submit" name="button" class="form-btn">submit</button>

          </fieldset>
   </div>

or you can see the whole project https://github.com/YazeedAsaad0/Table

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

It 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
mjugi
9,448 Points

thank you , the issue was the button type attribute was submit when i changed it to button it did work

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Changing 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
mjugi
9,448 Points

yes , i had to change the <div> to <tr> but didn't work so i changed the type attribute to button then it did work