Как добавить строку в текстовый инпут из коллекции элементов или массива по событию?

Question

[aliasmark]

Задача - передать значение/имя/текст заголовка h1 в текстовый input после события клик мыши на button.
h1 по отношению к button не родительский, не соседний и т.д., чтобы можно было выбрать каким-либо методом.

let indexToHeaderList;
let headerList = document.querySelectorAll(".mainTm > div:nth-child(2) > div:nth-child(2) > h1"); // nodelist заголовков h1
let headerArr = Array.from(headerList); // преобразуем в массив
let knopokList = document.querySelectorAll(".mainTm > div:nth-child(2) > div:nth-child(4) > div:nth-child(2) > button.modalWindow"); // nodelist кнопок при клике на которые будет подхватываться заголовок h1
	knopokList.forEach(elem => elem.addEventListener('click', addValueToInput));
let inputTypeText = document.querySelector("#wpcf7-> form > p:nth-child(2) > span > input"); // выбрали целевой input 

function addValueToInput (event) {
	let choosenElem = Array.prototype.indexOf.call(knopokList, event.target);
	indexToHeaderList = String(headerArr[choosenElem]);
	inputTypeText.setAttribute('value', indexToHeaderList); // [object HTMLHeadingElement]
}

В текстовом инпуте вместо текста заголовка h1 отображается [object HTMLHeadingElement]. Проверял переменную indexToHeaderList
оператором typeof - пишет что это строка, но почему не передается (или не то) в инпут - не ясно.

Answer 1

[Алексей Уколов]

- indexToHeaderList = String(headerArr[choosenElem]);
+ indexToHeaderList = headerArr[choosenElem].innerText;

Возможно, вместо innerText вам больше подойдёт textContent (но вряд ли).

оператором typeof - пишет что это строка

Ну так вы же по-любому на typeof проверяли после того как сами руками к строке привели?

Comments

[aliasmark]

Подошёл textContent. Все работает. Только я не пойму, почему, допустим, не вставляется в виде (открывающий тег) Some text... (закр-ый тег). Мне в таком виде не требуется, просто интересно. Это какой-то особый тип данных отличный от общеизвестных String, Number и т.д.?

[Алексей Уколов]

Потому что для этого используется другое свойство: https://developer.mozilla.org/en-US/docs/Web/API/E...

Это какой-то особый тип данных отличный от общеизвестных String, Number и т.д.?

Это объект, у которого есть публичное API - свойства и методы, каждый из которых отвечает за что-то своё. Соответственно, исходя из задачи нужно подбирать конкретное решение.