CODEWITHSUNDEEP
javascriptdom
Ioana
Ioana

Reputation: 47

how to create user inputs (using javascript)

I am trying to create a simple phone book in javascript. I want when the user clicks on "Add Contact" to have their name and phone appear in a separate division at the bottom. I have the code below, but for some reason it's not working. What are your thoughts?

var persons = {};
function showTable() {
  str = "";
  for (var i = 0; i < persons.length; i++) {
    str += `<tr>
              <td>${persons[i].name}</td>
              <td>${persons[i].phone}</td>
            </tr>`
  }
  document.querySelector("table tbody").innerHTML = str;
}
<!DOCTYPE html>
<html>

<head>
  <title>PhoneBook</title>
</head>

<body>
  <h1>PhoneBook</h1>
  <form>
    <label for="name">Name</label>
    <input type="text" name="name" id="name">
    <label for="phone">Phone</label>
    <input type="text" name="phone" id="phone">
    <input type="button" class="btn" value="Add contact" onclick="showTable;">
  </form>
  <div id="containerPhoneBook">
    <table id="inputs">
      <thead>
        <tr>
          <td>Name</td>
          <td>Phone</td>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</body>

</html>

Upvotes: 1

Views: 42

Answers (2)

mplungjan
mplungjan

Reputation: 177851

  1. You define an empty object. You need an array [] and you can pre-populate it or not. A prepopulated array would look like
    var persons = [{ name:"Fred", phone:" 123"}, {name:"Bob", phone:"234"}];
  2. You need to call the function using () as in showTable()
  3. You did not store the persons on click of add so I created an addTable that calls showTable each time

var persons = [];

function showTable() {
  str = "";
  for (var i = 0; i < persons.length; i++) {
    str += `<tr>
              <td>${persons[i].name}</td>
              <td>${persons[i].phone}</td>
            </tr>`
  }
  document.querySelector("table tbody").innerHTML = str;
}

function addTable() {
  persons.push({
    name: document.getElementById("name").value,
    phone: document.getElementById("phone").value
  })
  showTable();
}
window.addEventListener("load", showTable);
<!DOCTYPE html>
<html>

<head>
  <title>PhoneBook</title>
</head>

<body>
  <h1>PhoneBook</h1>
  <form>
    <label for="name">Name</label>
    <input type="text" name="name" id="name">
    <label for="phone">Phone</label>
    <input type="text" name="phone" id="phone">
    <input type="button" class="btn" value="Add contact" onclick="addTable();">
  </form>
  <div id="containerPhoneBook">
    <table id="inputs">
      <thead>
        <tr>
          <td>Name</td>
          <td>Phone</td>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</body>

</html>

You see I use an event handler to wait for the table to exist. It is not recommended to use inline event handlers so you could also do document.querySelector(".btn").addEventListener("click",addTable)

Upvotes: 1

FZs
FZs

Reputation: 18619

You must append new persons to persons. I created a new function addPerson for this purpose.

JS

 var persons = [];
 function addPerson(name,phone){
   person={
     name:name.substring(0),
     phone:phone.substring(0)
   }
   persons.push(person)
   showTable()
 }
 function showTable() { 
   str = ""; 
   for (person of persons) {
     str += '<tr>
       <td>'+person.name+'</td>
       <td>'+person.phone+'</td>
     </tr>'
   }
   document.querySelector("table tbody").innerHTML = str;
 }

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>PhoneBook</title>
  </head>
  <body>
    <h1>PhoneBook</h1>
    <form>
      <label for="name">Name</label>
      <input type="text" name="name" id="name">
      <label for="phone">Phone</label>
      <input type="text" name="phone" id="phone">
      <input type="button" class="btn" value="Add contact" onclick="addPerson(document.getElementById('name').value,document.getElementById('phone').value)">
    </form>
    <div id="containerPhoneBook">
      <table id="inputs">
        <thead>
          <tr>
            <td>Name</td>
            <td>Phone</td>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </body> 
</html>

Upvotes: 0

Related Questions