Почему выводится [object HTMLButtonElement] вместо текста?

Question

[holfizz]

Вот код:

let a = document.querySelector('.a'),
    b =  document.querySelector('.b'),
    c =  document.querySelector('.c');
const input = document.querySelector('.input')
let array = [a,b,c]
let pup = []
for (let element of array) {
    element.addEventListener('click', ()=>{
        pup.push(element)
        console.log(pup.join(''))
    })
}

Что делать?

Comments

[Strannyk]

Получить "value" инпута и не пихать html-элементы в массив.

[holfizz]

Strannyk, я хотел попрактиковаться и сделать типо клавиатуры, input в него должно все выводиться. Или я просто не понимаю вас:)

[WapSter]

Strannyk, что плохого в закидывание элеметов в массив?

[holfizz]

Strannyk, мне нужно чтобы при нажатии на кнопку выводилась буква в консоль, а при нажатии на 2 букву уже 2 буквы) и т.д

[Strannyk]

WapSter, в данном случае. Но, похоже, я просто не понял задумку автора.

[Strannyk]

holfizz, ну тогда добавьте data-атрибут вашим кнопкам и оперируйте им.

<button data-value="A">A</button>

[holfizz]

Strannyk, спасибо большое буду пробовать:)

[WapSter]

Strannyk, элементы в массив ложить можно. Просто в данном случае автор неверно общается с этим массивом, а код делает ровно то, что сказал делать ему автор. Зачем дата атрибуты, если уже заданы классы.
holfizz,

let a = document.querySelector('.a'),
    b =  document.querySelector('.b'),
    c =  document.querySelector('.c');
const input = document.querySelector('.input')
let array = [a,b,c]
let pup = []
for (let element of array) {
    element.addEventListener('click', (e)=>{
        const [elementClass] = e.target.classList
        pup.push(elementClass)
        console.log(pup.join(''))
    })
}

[Strannyk]

WapSter, а откуда уверенность, что кнопкам никогда не будет добавлено других классов и их не напишут перед целевым? Семантичнее для этого использовать атрибут.

[WapSter]

Strannyk, я исхожу из условий данной задачи. Дата атрибуты вообще не семантичны, для таких задач используется button с value как значение.

[Strannyk]

WapSter, так четкого условия и не было. )) К тому же ваше решение нестабильно в случае добавления класса каким-нибудь верстальщиком.

Дата атрибуты вообще не семантичны.

А мужики-то не знают.
Как бы там ни было, классы для хранения полезной нагрузки похдодят еще меньше. Они для стилизации, не более.

Но для кнопки можно и value, да.

И в массив-таки лучше класть целевые значения, а не html-элементы. Код сложнее не станет, но на отладке будет нагляднее.

[WapSter]

Strannyk, был кусок кода. Потом появился коммент. Вот и условия людей которые не умееют их нормально изъяснять))
Ссылку что ты скинул загляни в блок проблемы

Answer 1

[Levsha1337]

element.value