Как подставить значение input-а в некоторые части div?

Question

На странице есть много прогресс-баров. Связанные прогресс-бары и input-ы имеют одинаковый класс и id. Как подставить значение input-а в div в те три места, где написано 50 (style width, aria-valuenow, сам текст в div)?

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

    <input type="number" id="aaa" value="30" />
    <div class="progress mb-1">
        <div class="progress-bar bg-success aaa" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50</div>
    </div>

    <input type="number" id="bbb" value="40" />
    <div class="progress mb-1">
        <div class="progress-bar bg-success bbb" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50</div>
    </div>

Answer 1

Тут нет ничего сложного: ловить ивент ввода текста, искать элемент по классу, который равен содержимому из id, изменять свойства элемента.

addEventListener('input', (e) => {
  let progressEl = document.getElementsByClassName(e.target.id)[0];
  if (progressEl) {
    progressEl.setAttribute('aria-valuenow', e.target.value);
    progressEl.style.width = `${e.target.value}%`;
    progressEl.innerHTML = e.target.value;
  }
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<input type="number" id="aaa" value="30" />
<div class="progress mb-1">
  <div class="progress-bar bg-success aaa" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50</div>
</div>

<input type="number" id="bbb" value="40" onchange="" />
<div class="progress mb-1">
  <div class="progress-bar bg-success bbb" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50</div>
</div>

БЛОГ НА HUSL

Как подставить значение input-а в некоторые части div?

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