как заменить ввод текстовыми областями

Question

В настоящее время я работаю над проектом html5, в котором есть много полей input, которые я хочу заменить на textarea.

Пример:

<input type="text" id="Questions" name="texte1"/>
<input type="text" id="Questions" name="texte2"/>
<input type="text" id="Questions" name="texte3"/>

Есть 200 входов, которые я хочу изменить:

<textarea id="Questions" name="texte1"></textarea> 
<textarea id="Questions" name="texte2"></textarea> 
<textarea id="Questions" name="texte3"></textarea> 

, но я не могу использовать поиск изамените инструмент , потому что имя отличается для каждого ввода Поэтому мне было интересно, знает ли кто-нибудь из вас быстрый способ замены всех моих входов текстовой областью без изменения имен 1 на 1 в моем коде.

Answer 1

Вам нужен критерий, который говорит вам, какие входы необходимо заменить.Что у них общего?Также обратите внимание, что вы не можете иметь более одного элемента на странице с одинаковым значением для id, поэтому отображаемый HTML-код недопустим.

Так что для примера кода я предполагаю, что все входные данные, которые должныбыть замененным иметь класс CSS replace-me:

document.getElementById('replace').addEventListener('click', (e) => {
  const toReplace = [...document.querySelectorAll('.replace-me')]
  for (const input of toReplace) {
    const textarea = document.createElement('textarea')
    const parent = input.parentNode
    textarea.id = input.id
    textarea.name = input.name
    textarea.value = input.value
    parent.removeChild(input)
    parent.appendChild(textarea)
  }  
})

<div>
  <input class="replace-me" type="text" value="1" id="i1" name="foo1" />
  <input class="replace-me" type="text" value="2" id="i2" name="foo2" />
  <input class="replace-me" type="text" value="3" id="i3" name="foo3" />
  <input class="replace-me" type="text" value="4" id="i4" name="foo4" />
  <input class="replace-me" type="text" value="5" id="i5" name="foo5" />
</div>
<button type="button" id="replace">Click to replace</button>