Помощь с input, output в html

Question

Пробую вывести таким образом(все работае):

<form oninput="result.value=text.value">
  <p><input type="text" name="text" autofocus></p>
  <p><output name="result" style="font-size: 40px;"></output></p>
</form>

Но когда хочу вывести тот же текст, но добавляю еще несколько тегов

текст просто исчезает, как решить проблему?, вот пример когда как делаю:

<form oninput="result.value=text.value">
  <p><input type="text" name="text" autofocus></p>
  <p><output name="result" style="font-size: 40px;"></output></p>
  <p><output name="result" style="font-size: 20px;"></output></p>
  <p><output name="result" style="font-size: 30px;"></output></p>
  <p><output name="result" style="font-size: 10px;"></output></p>
</form>

Answer 1

Если там несколько одинаковых name, использование этого имени дает список элементов:

<form oninput="console.log(result); console.log('►', result.constructor.name);">
  <p><input type="text" name="text" autofocus></p>
  <p><output name="result" style="font-size: 40px;"></output></p>
  <p><output name="result" style="font-size: 20px;"></output></p>
  <p><output name="result" style="font-size: 30px;"></output></p>
  <p><output name="result" style="font-size: 10px;"></output></p>
</form>

Попытка присваивания result.value = добавляет свойство value этому списку, а не его элементам. Нужно по отдельности обращаться к каждому элементу, result[0].value = ...; result[1].value = ...;

Соответственно, желаемое можно сделать в цикле, который уже не приятно будет писать в однострочном виде в HTML-атрибуте.

let form = document.querySelector("#form");

form.text.addEventListener("input", function() {
  let out = form.result;
  
  for (let i = 0; i < out.length; i++) {
    out[i].textContent = form.text.value;
  }
});

<form id="form">
  <p><input type="text" name="text" autofocus></p>
  <p><output name="result" style="font-size: 40px;"></output></p>
  <p><output name="result" style="font-size: 20px;"></output></p>
  <p><output name="result" style="font-size: 30px;"></output></p>
  <p><output name="result" style="font-size: 10px;"></output></p>
</form>

БЛОГ НА HUSL

Помощь с input, output в html

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