Задать вопрос
@estkler
javascript

Что нужно скорректировать в коде, чтобы он начал работать?

function addPhones () {
    
var getName = document.getElementById("name").innerHTML;
var getSurname = document.getElementById("surname").innerHTML;
var getNumber = document.getElementById("number").innerHTML;

var crElement = document.createElement("li");
var crInfo = document.createTextNode(getNumber, " ", getSurname, " ", getNumber);
crElement.appendChild(crInfo);
document.getElementsByClassName("input-field").appendChild(crElement);
    
}


<!DOCTYPE html>
<html lang="en">
<head>
   <link rel="stylesheet" href="main.css">
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div class="page">
       <div class="head-field">
          <p>Name</p>
           <input type="text" class="input" id="name">
           <p>Surname</p>
           <input type="text" class="input" id="surname">
           <p>Phone number</p>
           <input type="text" class="input" id="number">
           <button type="button" onclick="addPhones()" class="head-field__button">Add</button>
       </div>
       <div class="main-field">
           <p>Field with names</p>
           <ul class="input-field"></ul>
       </div>
   </div>
    <script src=main.js></script>
</body>
</html>


Попытка создать телефонный справочник. При нажатии на кнопку, данные из инпутов не выводятся в input-field
  • Вопрос задан
  • 137 просмотров
3 комментария
Подписаться 1 Оценить 3 комментария
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега JavaScript
Creative frontend developer
Во-первых:
Uncaught TypeError: document.getElementsByClassName(...).appendChild is not a function

Соответственно нужно по крайней мере что-то такое:
document.getElementsByClassName("input-field")[0].appendChild(crElement);


Во вторых - document.createTextNode принимает один параметр, так что если уж используете - используйте как полагается
var crInfo = document.createTextNode(getNumber + " " + getSurname + " " + getNumber);

И было бы очень логично заменить в этой строке первый getNumber на getName. А вообще, на будущее - лучше не называть переменные, содержащие какие-то данные, глаголами.

В третьих - значения инпутов нужно доставать с помощью value, а не innerhtml:
var getName = document.getElementById("name").value;
var getSurname = document.getElementById("surname").value;
var getNumber = document.getElementById("number").value;


Да, и еще на будущее: прикладывайте ссылку на codepen/jsfiddle - это приятно отвечающим, не нужно самим брать ваш код, выдирать из него части и копировать туда.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript Developer (backend / fullstack)
Brightdata • Тель-Авив
от 5 500 до 6 500 $
JavaScript FullStack разработчик
Rocket • Брянск
от 60 000 до 100 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Спроектировать АЛУ в Multisim и привести краткое теор. обоснование
17 мая 2024, в 20:08
3000 руб./за проект
Написать автотесты на Python
17 мая 2024, в 19:20
1500 руб./за проект
Парсинг групп в Telegram и Discord
17 мая 2024, в 19:05
100000 руб./за проект
Ещё заказы