Как правильно присвоить значение инпутов для элементов?

Question

Сорян за такие вопросы, разобраться пытался, честно. Как менять размер спанов независимо друг от друга?

    document.querySelector('.size').addEventListener('input', (e) => {
      const size = e.target.value
      const span = document.querySelectorAll('span')
    
      for (let i = 0; i < span.length; i++) {
        span[i].style.fontSize = size + 'px'
      }
    })

    <div class="size">
      <input type="range" id="size-picker--one" min="20" max="50">
      <input type="range" id="size-picker--two" min="15" max="50">
    </div>
    <span class='text1'>TEXT 1</span><span class='text2'>TEXT 2</span>

Answer 1

document.querySelector('.size').addEventListener('input', (e) => {
  let range = e.target;
  const size = range.value
  let spanId = range.dataset.spanId;
  const span = document.querySelector(`span[data-id="${spanId}"]`);
  span.style.fontSize = size + 'px';
});

<div class="size">
  <input type="range" id="size-picker--one" data-span-id=1 min="20" max="50">
  <input type="range" id="size-picker--two" data-span-id=2 min="15" max="50">
</div>

<span class='text1' data-id=1>TEXT 1</span>
<span class='text2' data-id=2>TEXT 2</span>

БЛОГ НА HUSL

Как правильно присвоить значение инпутов для элементов?

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