Извлечь значение из ввода и сохранить его в массиве

Question

Я пытаюсь взять пользовательский ввод, полученный с помощью прослушивателя событий, отобразить его на странице и сохранить значение в массиве для дальнейшего использования.Тем не менее, массив остается пустым.Есть идеи?

let arr = [];
function display() {
    let p = document.querySelector('p');
    let btn = document.querySelector('btn');
    let input = document.querySelector('input').value;
    btn.addEventListener('click', () => {
        p.textContent = input;
        arr.push(input);                         
    });
}
display();

Answer 1

Ваша проблема в том, что вы читаете input до того, как у кнопки будет прослушиватель событий - поэтому будет прочитано текущее значение (пустая строка). Обязательно объявите input внутри прослушивателя событий:

btn.addEventListener('click', () => {
  let input = document.querySelector("input").value;
  p.textContent = input;
  arr.push(input);                         
});

Answer 2

Я считаю, что проблема в том, что document.querySelector('btn') неправильно выбирает кнопку, потому что не существует такого элемента, как btn.Вам нужно изменить это на document.querySelector('button').Затем объедините это с тем, что упоминали другие ответы - вам также нужно захватить входное значение внутри функции обработчика событий.

let arr = [];
function display() {
  let p = document.querySelector("p");
  let btn = document.querySelector("button");
  btn.addEventListener("click", () => {
    let input = document.querySelector("input").value;
    p.textContent = input;
    arr.push(input);
  });
}
display();

Answer 3

function display() {
  let p = document.querySelector('p');
  let arr = [];
  let btn = document.querySelector('btn');
  btn.addEventListener('click', () => {
    let input = document.querySelector('input').value; // <-- move this line here
    p.textContent = input;
    arr.push(input);                         
  });
}
display()