как создавать пользовательские входы (используя JavaScript) - PullRequest
Новая
       3

как создавать пользовательские входы (используя JavaScript)

0 голосов
/ 18 ноября 2018

Я пытаюсь создать простую телефонную книгу в javascript. Я хочу, чтобы когда пользователь нажимал «Добавить контакт», его имя и телефон отображались в отдельном разделе внизу. У меня есть код ниже, но по какой-то причине он не работает. Что ты думаешь? 

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>

Ответы [ 2 ]

0 голосов
/ 18 ноября 2018

Вы должны добавить новых людей в persons.Я создал новую функцию addPerson для этой цели.

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>
0 голосов
/ 18 ноября 2018
  1. Вы определяете пустой объект.Вам нужен массив [], и вы можете предварительно заполнить его или нет.Предварительно заполненный массив будет выглядеть так:
    var persons = [{ name:"Fred", phone:" 123"}, {name:"Bob", phone:"234"}];
  2. Вы должны вызывать функцию с помощью (), как в showTable()
  3. Вы не сохраняли людей при нажатии кнопки add, поэтому ясоздал addTable, который каждый раз вызывает showTable 

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>

Видите ли, я использую обработчик событий для ожидания существования таблицы.Не рекомендуется использовать встроенные обработчики событий, чтобы вы могли также сделать document.querySelector(".btn").addEventListener("click",addTable)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...