событие в списке выбора

Question

const selectMenu = document.querySelectorAll('.calc-select'),
      calcBtnAdd = document.querySelector('.calc__button_add'),
      calcContent = document.querySelector('.calc__content'),
      calcBlockRow = document.querySelector('.calc-bloc-row');
let inputMenu = document.querySelectorAll(".calc__input");
// Это функция перестала работать
function addValueInput() {
  for(let i = 0; i < selectMenu.length; i++){
    selectMenu[i].addEventListener('change', function() {
    this.parentElement.children[1].placeholder = this.options[this.selectedIndex].value;
    });
  }
}
addValueInput();


function addItemCalc() {
  calcBlockRow.insertAdjacentHTML('beforeBegin', `
  <div class="calc-row">
  <div class="calc-block-select">
    <select class="calc-select">
      <option href="#" data-building="hospital" class="calc-select__option">Выберите тип</option>
      <option href="#" value="Введите кол-во койкомест" data-building="hospital" class="calc-select__option">Стационар</option>
      <option href="#" value="Введите кол-во койкомест" data-building="infectious hospital"  class="calc-select__option">Инфекционный</option>
      <option href="#" value="Введите кол-во посещений в сутки" data-building="polyclinic"  class="calc-select__option polyclinic">Поликлиника</option>
    </select>
    <input  type="text"class="calc__input">
  </div>
  <!-- /.menu -->
  <div class="calc-value-equipment">0</div>
  <!-- /.value-equipment -->
  <div class="calc-row-delete">
    <img src="img/calc-row-del.svg" alt="">
  </div>
  <!-- /.calc-row-delete -->
</div>
  `);
}

calcContent.addEventListener('click', (e) => {
  const target = e.target;
  if (target && target.classList.contains('calc__button_add')) {
    addItemCalc();
  }
});

<div class="calc__content">
  <div class="calc-bloc-row">
    <div class="calc-row">
      <div class="calc-block-select">
        <select class="calc-select">
          <option href="#" data-building="hospital" class="calc-select__option">Выберите тип</option>
          <option href="#" value="Введите кол-во койкомест" data-building="hospital" class="calc-select__option">Стационар</option>
          <option href="#" value="Введите кол-во койкомест" data-building="infectious hospital" class="calc-select__option">Инфекционный</option>
          <option href="#" value="Введите кол-во посещений в сутки" data-building="polyclinic" class="calc-select__option polyclinic">Поликлиника</option>
        </select>
        <input type="text" class="calc__input">
      </div>
      <div class="calc-value-equipment">0</div>
      <div class="calc-row-delete">
        <img src="img/calc-row-del.svg" alt="">
      </div>
    </div>
    <!-- /.calc-row -->
  </div>
  <!-- /.calc-bloc-row -->
  <div class="calc__buttons">
    <button type="submit" class="calc__button  button"><img class="calc__button_add" src="img/calc-add.svg" alt="Добавить учреждение"></button>
    <button type="submit" class="calc__button  button"><img class="calc__button_del" src="img/calc-del.svg" alt="Удалить учреждение"></button>
  </div>
  <!-- /.calc__buttons -->
</div>

Ребята помогите плиз, у меня значения в инпуты одинаково вставляется а хочу чтобы были независимы. Теперь когда строки добавляюдинамически то функция для инпута не работает, понимаю что через делегирвоание как засунутьт над но не пойму каким образом

Answer 1

Изменио принцип работы при выборе опций из селекта. Проблема была в том, что у автора работал только выбор опций из первого селекта и вывод сообщения в ВСЕХ инпутах. Код решает эту проблему тем что он в зависимости от селекта меняет определённый инпут, то есть тот кто с ним находятся в одном блоке

const selectMenu = document.querySelectorAll('.menu');
let inputMenu = document.querySelectorAll(".calc__input");

for(let i = 0; i < selectMenu.length; i++){
  selectMenu[i].addEventListener('change', function() {
  this.parentElement.children[1].value = this.options[this.selectedIndex].value;
  });
}

  .calc__input {
  border: 1px solid #C4C4C4;
  border-radius: 4px;

<div class="block">
  <select class="menu">
    <option href="#" data-building="hospital" class="sub-menu__link">Выберите тип</option>
    <option href="#" value="Введите кол-во койкомест" data-building="hospital" class="sub-menu__link">Стационар</option>
    <option href="#" value="Введите кол-во койкомест" data-building="infectious hospital" class="sub-menu__link">Инфекционный</option>
    <option href="#" value="Введите кол-во посещений в сутки" data-building="polyclinic" class="sub-menu__link polyclinic">Поликлиника</option>
  </select>
  <input type="text" class="calc__input">
</div>
<div class="block">
  <select class="menu">
    <option href="#" data-building="hospital" class="sub-menu__link">Выберите тип</option>
    <option href="#" value="Введите кол-во койкомест" data-building="hospital" class="sub-menu__link">Стационар</option>
    <option href="#" value="Введите кол-во койкомест" data-building="infectious hospital" class="sub-menu__link">Инфекционный</option>
    <option href="#" value="Введите кол-во посещений в сутки" data-building="polyclinic" class="sub-menu__link polyclinic">Поликлиника</option>
  </select>
  <input type="text" class="calc__input">
</div>

const selectMenu = document.querySelector('.menu'),
  parentMenu = document.querySelector('.block'),
  parentBlock = document.querySelector('.parentBlock');
let inputMenu = document.querySelectorAll(".calc__input");

function changeInput(elem) {
  elem.parentElement.children[1].value = elem.options[elem.selectedIndex].value;
}

function addNewBlock() {
  let newBlock = parentMenu.cloneNode(true);
  newBlock.children[1].value = null;
  newBlock.children[3].checked = false;
  parentBlock.appendChild(newBlock);
}
//Удалить это что-бы оставить удаление толькой одной записи
function deleteBlock(elem) {
  elem.parentElement.remove();
}
//Удалить это что-бы оставить удаление с выбором
function deleteSelectBlock() {
  let selectedBlock = document.querySelectorAll('.calc__check');
  for (let i = 0; i < selectedBlock.length; i++) {
    if (selectedBlock[i].checked == true) {
      selectedBlock[i].parentElement.remove();
    }
  }
}

<div class="parentBlock">
  <div class="block">
    <select class="menu" onchange="changeInput(this)">
      <option href="#" data-building="hospital" class="sub-menu__link">Выберите тип</option>
      <option href="#" value="Введите кол-во койкомест" data-building="hospital" class="sub-menu__link">Стационар</option>
      <option href="#" value="Введите кол-во койкомест" data-building="infectious hospital" class="sub-menu__link">Инфекционный</option>
      <option href="#" value="Введите кол-во посещений в сутки" data-building="polyclinic" class="sub-menu__link polyclinic">Поликлиника</option>
    </select>
    <input type="text" class="calc__input">
    <!-- 1 = Удалить это что-бы оставить удаление толькой одной записи -->
    <input type="button" class="calc__delete" value="X" onclick="deleteBlock(this)">
    <!-- 2 = Удалить это что-бы оставить удаление с выбором -->
    <input type="checkbox" class="calc__check">
  </div>
</div>
<button onclick="addNewBlock()">Добавить</button>
<button onclick="deleteSelectBlock()">Удалить</button>

БЛОГ НА HUSL

событие в списке выбора

Ответы (1 шт):