0

У меня есть список кнопок в сайдбаре и два поля ввода(номер один и номер два) в главном контейнере. Мне нужно сделать так, чтобы при нажатии на первую(или вторую, третью и т.д.) кнопку имя этой кнопки отправилось на главный контейнер в поле ввода номер один. Затем при нажатии на вторую(или первую, или третью и т.д.) кнопку имя этой кнопки отправилось на главный контейнер в поле ввода номер два. Я думаю, что я должен это сделать с помощью события onclick, но для меня способ реализации не имеет большого значения. Ниже приведу свой код, который отправляет имя нажатой кнопки только в первое поле ввода(поле номер один).

JS

function projectClick(index, name) {
  const nameA = document.getElementById('prjA');
  const nameB = document.getElementById('prjB');   
  nameA.value = name;
}

pug

mixin projectButton(objectName index) 
  lable
    input.prjBtn(type="button" value=`${objectKey}` onclick="projectClick('" + index + "','" + objectKey + "')")

block append main
  form.formMod
    input.form-control#prjA(type="text" name="prjA")
    input.form-control#prjB(type="text" name="prjB")

block append sidebar
  form.formMod
    each val, index in projectlist
      +projectButton(val.objectKey, index)
3
  • А если уже два поля заполнены, и потом кликнуть на 3ю кнопку. Что произойдет?
    – Lukas
    14 мар 2019 в 15:25
  • а в чем смысл в случае одного обработчика на нескольких кнопках, почему например не ловить событие на контейнере в котором расположены эти кнопки?
    – Bald
    15 мар 2019 в 3:08
  • приведите в вопросе ссылку на codepen с той разметкой которая у вас есть, постараюсь помочь...
    – Bald
    15 мар 2019 в 9:16

1 ответ 1

2

Это можно сделать если пройтись циклом по элементам и повесить на них эвент onClick. Например так

const buttons = document.querySelectorAll('input[type="button"]');
for(let i = 0 ; i < buttons.length ; i++) {
  const btn = buttons[i]; 
  btn.addEventListener('click' , (e) => projectClick(i , e.target.value))
}
2
  • а почему для итерации не использовать forEach вместо for?
    – Bald
    15 мар 2019 в 3:05
  • @AlisaBondarchuk рабочий пример
    – Bald
    15 мар 2019 в 8:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.