How to add a row to a pre-existing table with button included

Question

I'm trying to add a row to a table with pre-existing values. On each row there is an "Edit" button that doesn't do anything (by design). I also have a prompt where the user would input their name, email, and phone number and that would be added to the table above. Everything works but I think I'm missing something in my .js file. What am I missing?

let btnAdd = document.querySelector('button');
let table = document.querySelector('table');

                let nameInput = document.querySelector('#name');
                let numberInput = document.querySelector('#number');
                let emailInput = document.querySelector('#email');
                

               /* btnAdd.addEventListener('click', () =>{
                    let name = nameInput.value;
                    let number = numberInput.value;
                    let email = emailInput.value;

                    let template = `
                    <tr>
                        <td>${name}</td>
                        <td>${number}</td>
                        <td>${email}</td>
                        <td><input type ="button" value="Edit" onclick="javascript:void(0);" </td>
                        <td><input type ="button" value="Add New Contact" onclick="script.js();" </td>
                    </tr>
                    `;
                    
                    table.innerHTML += template;
                })
            }*/

            function demoClick () 
            {
                alert
                 (
                    "Script Loaded"
                );
            }

<html>
    <head>       
        <title>Stars in the HollyWoo Sky</title>
        <link href = "style.css" rel="stylesheet" type="text/css">
        <script type = "text/javascript" src= "script.js">
        </script>
    </head>
    <body>
        <img class= "img-horse" src = "hollywoo.jpg" alt="Sad Horse Man">
        <div class = "container">
            <div id="data">
                <h3>Add your info to recieve notifications!</h3>
                <input type = "text" id="name" placeholder="Enter Name">
                <input type = "text" id="number" placeholder="Enter Phone Number">
                <input type = "text" id="email" placeholder="Enter Email Address">
                <input type ="button" value="Add New Contact" onclick="demoClick();"></td>
            </div>

            <table class= "content-table" id="ContactList">
                <thead>
                <h2>Secretariat Mailing List</h2>
                    <tr>
                        <th>Contact Name</th> 
                        <th>Contact Number</th> 
                        <th>Contact Email</th> 
                        <th>Contact Action</th> 
    
                    </tr>
                </thead>
    
               
                <tbody>
                    <tr> 
                        <td>Bojack Horseman</td> 
                        <td>323-902-1992</td> 
                        <td>SecretariatRulez96@hotmail.com</td> 
                        <td><input type ="button" value="Edit" onclick="javascript:void(0);" /></td> 
                    </tr>
        
                    <tr> 
                        <td>Diane Nguyen</td> 
                        <td>323- 319-1980</td> 
                        <td>TotallyNotDiane@gmail.com</td> 
                        <td><input type ="button" value="Edit" onclick="javascript:void(0);" /></td> 
                    </tr>
        
                    <tr>        
                        <td>Todd Chavez</td> 
                        <td>323-248- 4156</td> 
                        <td>DizneyWorld@bonzibuddi.net</td> 
                        <td><input type ="button" value="Edit" onclick="javascript:void(0);" /></td> 
                    </tr>
                </tbody>           
                  
        </table>
    </div>
    </body>
</html>

Please use a code formatter. It will help you in your development carreer. And other developers to read your code. — Roko C. Buljan, Aug 23 '20 at 21:25
So if "everything works", and the button that doesn't is such "by design", then what is the actual issue? What do you need help with? — PLW, Aug 23 '20 at 21:28
(Tip:) Stop using inline `on*=""` handlers, as well as you (hopefully) don't use inline `style=""` attributes. It's hard to debug and maintain. Your JavaScript is meant to be inside your script only, not disseminated around your HTML files. Use [`Element.addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) instead. — Roko C. Buljan, Aug 23 '20 at 21:29

Scott Marcus · Accepted Answer · 2020-08-23T21:41:25.723

You have this line:

let btnAdd = document.querySelector('button');

However, you have no <button> elements in your code. If you give your "Add New Contact" input element an id, you could then reference it with:

let btnAdd = document.getElementById('btnAdd');

Additionally, you have some problems with your HTML being invalid (i.e. you can't just put content within a table element - - they must be within a th or td.

Lastly, do not use inline HTML event attributes such as onclick. Instead, separate your JavaScript from your HTML and use .addEventListener and do not use javascript:void(0); - - both of these are syntax from about 20 years ago and really don't have a practical us today.

See the HTML and JavaScript comments inline below:

let btnAdd = document.getElementById('btnAdd');
let table = document.querySelector('table');

// When an element has an id, use `.getElementById()`, which
// is the most efficient way to find the element.
let nameInput = document.getElementById('name');
let numberInput = document.getElementById('number');
let emailInput = document.getElementById('email');      

btnAdd.addEventListener('click', () =>{
  let name = nameInput.value;
  let number = numberInput.value;
  let email = emailInput.value;

  let template = `<tr>
                    <td>${name}</td>
                    <td>${number}</td>
                    <td>${email}</td>
                    <td><input type ="button" value="Edit"></td>
                 </tr>`;
                 
  table.innerHTML += template;
});

<html>
    <head>       
        <title>Stars in the HollyWoo Sky</title>
        <link href ="style.css" rel="stylesheet" type="text/css">
        <script src="script.js"></script>
    </head>
    <body>
        <img class= "img-horse" src = "hollywoo.jpg" alt="Sad Horse Man">
        <div class = "container">
            <div id="data">
                <h3>Add your info to recieve notifications!</h3>
                <input type = "text" id="name" placeholder="Enter Name">
                <input type = "text" id="number" placeholder="Enter Phone Number">
                <input type = "text" id="email" placeholder="Enter Email Address">
                <input type ="button" value="Add New Contact" id="btnAdd"> <!-- You had a <td> here, which is invalid.  -->
            </div>
            <table class= "content-table" id="ContactList">
                <thead>
                    <tr>
                       <!-- Content must go into a table cell -->
                      <th colspan="4"><h2>Secretariat Mailing List</h2></th>
                    </tr>
                    <tr>
                        <th>Contact Name</th> 
                        <th>Contact Number</th> 
                        <th>Contact Email</th> 
                        <th>Contact Action</th> 
                    </tr>
                </thead>
                <tbody>
                    <tr> 
                        <td>Bojack Horseman</td> 
                        <td>323-902-1992</td> 
                        <td>SecretariatRulez96@hotmail.com</td> 
                        <td><input type ="button" value="Edit"></td> 
                    </tr>
                    <tr> 
                        <td>Diane Nguyen</td> 
                        <td>323- 319-1980</td> 
                        <td>TotallyNotDiane@gmail.com</td> 
                        <td><input type ="button" value="Edit"></td> 
                    </tr>
                    <tr>        
                        <td>Todd Chavez</td> 
                        <td>323-248- 4156</td> 
                        <td>DizneyWorld@bonzibuddi.net</td> 
                        <td><input type ="button" value="Edit"></td> 
                    </tr>
                </tbody>           
        </table>
    </div>
    </body>
</html>

@ButtonPusher You're welcome. Please consider marking this as "the" answer by clicking the check mark at the top left of the answer. — Scott Marcus, Aug 23 '20 at 21:56
Once I've got it working I will. Still a little lost. New to this. If anyone can spare the time to talk to me directly it would be much appreciated. Sorry if the above is confusing. — ButtonPusher, Aug 23 '20 at 21:59

How to add a row to a pre-existing table with button included

1 Answers1