Как добавить элементы в массив?

Question

[testkeyc]

Задачка такая. Создать пустой массив. Поле input для ввода элементов и div для вывода. При клике на первую кнопку в массив должны добавляться элементы. При клике на вторую и третью удаляться первый и последний.
Скажите, что я сделал не так, что при нажатии на кнопку в массив добавляются запятые, а не элементы, которые я ввожу.
Как посмотреть через браузер какие массивы у меня созданы и что в них лежит.
Всем спасибо))

<input type="text" class="u-1">
	<button class="u-2__push">Click</button>
	<button class="u-2__pop">Pop</button>
	<button class="u-3__shift">Shift</button>
	<div class="out-1"></div>

let arr1 = [];
let input = document.querySelector('.u-1').value;
let button = document.querySelector('.u-2__push');
let div = document.querySelector('.out-1');
let pop = document.querySelector('.u-2__pop');
let shift = document.querySelector('.u-3__shift');
button.onclick = () => {
    arr1.push(input);
    div.innerHTML = arr1;
}

pop.onclick = () => {
    arr1.pop();
    div.innerHTML = arr1;
}

shift.onclick = () => {
    arr1.shift();
    div.innerHTML = arr1;
}

Answer 1

[Александр]

Проблема в том что переменная input содержимого присваивается до клика и она пустая в тот момент.

Правильно так:

button.onclick = () => {
    let input = document.querySelector('.u-1').value;
    arr1.push(input);
    div.innerHTML = arr1;
}

или так(input ссылается на объект DOM дерева):

let input = document.querySelector('.u-1');
button.onclick = () => {
    arr1.push(input.value);
    div.innerHTML = arr1;
}