textContent изменяет содержимое текстового поля только один раз

Question

По нажатию кнопок должно изменяться содержимое текстового поля (в него вставляется шаблон, с которым пользователь дальше работает). Когда пользователь внёс в шаблон свои данные и кликает за пределы текстового поля, итоговый текст выводится в виде абзаца в соответствующую часть окна. Однократно всё это срабатывает как надо. Но при внесении любых изменений в шаблон функция почему-то перестает срабатывать: при нажатии на кнопки в текстовом поле (и в итоговом абзаце) остается измененный шаблон, вызванный последней кнопкой. Сообщение об ошибке в консоли не появляется.

Не могу понять, в чем прикол. Пробовал менять .textContent на .innerText - результат тот же :(

function anamnesisHealthy(){
  document.getElementById("anamnesisMorbiTextArea").textContent = 'За последнее время...';
}
function anamnesisAcuteTonsillitis(){
  document.getElementById("anamnesisMorbiTextArea").textContent = 'Заболел остро...';
}
// пересылка текста из текстового поля в нужный столбец
const AnamnesPattern = document.getElementById('anamnesisMorbiTextArea');
AnamnesPattern.addEventListener('change', function (event) {
  document.getElementById('AnamnesisMorbiIs').textContent = AnamnesPattern.value;
})

<button onclick="anamnesisHealthy()">шаблон 1</button>
<button onclick="anamnesisAcuteTonsillitis()">Шаблон 2</button>
<textarea id="anamnesisMorbiTextArea" placeholder="***"></textarea>
<p id="AnamnesisMorbiIs"></p>

Answer 1

Дело в том, что input - одиночный тег, а innerText и textContent записываются внутрь <>Тега<>.

Используйте value. Вот документация.

Вот исправленное решение:

function anamnesisHealthy(){
  document.getElementById("anamnesisMorbiTextArea").value = 'За последнее время...';
}
function anamnesisAcuteTonsillitis(){
  document.getElementById("anamnesisMorbiTextArea").value = 'Заболел остро...';
}
// пересылка текста из текстового поля в нужный столбец
const AnamnesPattern = document.getElementById('anamnesisMorbiTextArea');
AnamnesPattern.addEventListener('change', function (event) {
  document.getElementById('AnamnesisMorbiIs').textContent = AnamnesPattern.value;
})

<button onclick="anamnesisHealthy()">шаблон 1</button>
<button onclick="anamnesisAcuteTonsillitis()">Шаблон 2</button>
<textarea id="anamnesisMorbiTextArea" placeholder="***"></textarea>
<p id="AnamnesisMorbiIs"></p>

БЛОГ НА HUSL

textContent изменяет содержимое текстового поля только один раз

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