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

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`;

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

// или

const onClick = el => input.value = el.textContent.trim();

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

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
}
})