Трансляция текста из inputa в

Question

Надо сделать что бы из поля input, текст сразу появлялся в поля "p" и их должно быть два.

Вот html:

<div id="home" class="home">
    <div class="stiker__menu">
        <input id="input__stiker1" class="input__stiker" placeholder="Стикер 1" name="name"/>
        <input id="input__stiker2" class="input__stiker" placeholder="Стикер 2" name="name"/>
    </div>
    <div class="img"> 
        <p id="stiker1" class="stiker">puk</p>     
        <p id="stiker2" class="stiker">puk</p>
        <img src="shop_1.jpg" alt="">
    </div>
</div>

Вот Js:

const input = document.querySelectorAll('input');
const log = document.querySelectorAll('.stiker');

input.addEventListener('input', updateValue);

function updateValue(event) {
    log.textContent = event.target.value;
}

Заранее спасибо :3

Answer 1

Универсальный скрипт, если этих инпутов будет много.
Подробное описание работы в комментариях к коду.

document.querySelector('.stiker__menu').addEventListener('input', function(e){ // Берём блок sticker__menu и вешаем на него делегированный обработчик, который будет слушать изменения input'ов "входящие" в этот блок
  if(e.target.classList.contains('input__stiker')) { // Если происходят изменения инпута input__stiker, то выполняем код:
    document.querySelector('#'+e.target.id.replace('input__', '')).innerText = e.target.value; // находим элемент чей ID равен тому, что указан у текущего input, но без `input__`, и присваиваем ему текст текущего input'а
  }
});

<div id="home" class="home">
  <div class="stiker__menu">
    <input id="input__stiker1" class="input__stiker" placeholder="Стикер 1" name="name" />
    <input id="input__stiker2" class="input__stiker" placeholder="Стикер 2" name="name" />
  </div>
  <div class="img">
    <p id="stiker1" class="stiker">puk</p>
    <p id="stiker2" class="stiker">puk</p>
    <img src="shop_1.jpg" alt="">
  </div>
</div>

БЛОГ НА HUSL

Трансляция текста из inputa в

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