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

Почему ничего не происходит — элементы p не добавляются на страницу?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="forms">
        <h1>Форма опроса</h1>
        <form>
            <div class="Name">
                <label class="lname">Имя пользователя:</label>
                <input class="input" type="text" required/>
            </div>
            <div class="Email">
                <label class="lemail">Email:</label>
                <input class="email" type="text" required/>
            </div>
            <div class="Button">
                <button class="button">Отправить</button>
            </div>
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>


let Name = document.querySelector('.Name');
let Email = document.querySelector('.Email');
let button = document.querySelector('.button');
let forms = document.querySelector('.forms');

let labels = document.querySelectorAll('label');
let inputs = document.querySelectorAll('input');
let newDiv = document.createElement('div');
forms.append(newDiv);

button.onclick = function(e) {
    e.preventDefault();
    let P = document.querySelectorAll('p');
    inputs.forEach(input => {
        if(P) { 
            P.forEach(p => {
                p.remove();
            })
        } else {
        let p = document.createElement('p');
        p.textContent = input.value;
        newDiv.append(p); 
        }  
    })
}

Name.style.marginBottom = "20px";

Email.style.marginBottom = "20px";

Код должен добавлять на страницу 2 элемента p с информацией из input.value, но при нажатии button - ничего не происходит и на странице не появляются элементы p.
Что не так?
  • Вопрос задан
  • 124 просмотра
2 комментария
Подписаться 1 Простой 2 комментария
Помогут разобраться в теме Все курсы
  • Нетология
    Веб-разработчик с нуля: профессия с выбором специализации
    14 месяцев
    Далее
  • Академия Эдюсон
    Fullstack-разработчик на JavaScript + ИИ
    11 месяцев
    Далее
  • ProductStar × РБК
    Профессия: Инженер по тестированию + ИИ
    6 месяцев
    Далее
Пригласить эксперта
Ответы на вопрос 1
opium
@opium
Просто люблю качественно работать
`querySelectorAll` возвращает NodeList — это объект, он всегда truthy, даже пустой. поэтому `if(P)` никогда не идёт в else.

перепиши так:

button.onclick = function(e) {
    e.preventDefault();
    newDiv.querySelectorAll('p').forEach(p => p.remove());
    inputs.forEach(input => {
        let p = document.createElement('p');
        p.textContent = input.value;
        newDiv.append(p);
    });
}
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы