Как при нажатии на кнопку, вписать в другой див значение?

Question

[ololoshka1]

https://codepen.io/vintalis/pen/XWdRYMN код,
По этому примеру, как правильно сделать, что б например , при нажатии на 'хочу" второго .box записывалось в input значения например селектора .box-title .Я что-то пробовал циклом, но ничего не вышло, уверен у вас выйдет!)

Answer 1

[0xD34F]

Куда, откуда, по нажатию на кого надо вписывать значение:

const input = document.querySelector('.inputprice');
const container = document.querySelector('.inner');
const itemSelector = '.box';
const buttonSelector = `${itemSelector} .btn`;
const valueSelector = `${itemSelector} .box-title`;

Вариант раз - слушаем клики непосредственно на кнопках:

const onClick = el => input.value = el.innerText;

container.querySelectorAll(buttonSelector).forEach(function(n, i) {
  n.addEventListener('click', onClick.bind(null, this[i]));
}, container.querySelectorAll(valueSelector));

Вариант два - подключаем обработчик клика к общему предку кнопок:

container.addEventListener('click', ({ target: t }) => {
  if (t = t.closest(buttonSelector)?.closest(itemSelector)) {
    input.value = t.querySelector(valueSelector).textContent.trim();
  }
});

Comments

[ololoshka1]

спасибо,а я через цикли делал)перебирал все варианты...Буду и дальше учится, спасибо еще раз)

Answer 2

[Danny]

window.addEventListener("load", e => {

let btn = document.querySelectorAll('.btn'),
boxTitle = document.querySelectorAll('.box-title p'),
inp = document.querySelector('.inputprice')

btn[1].onclick = function () {
inp.value = boxTitle[1].innerHTML
}
})