Значение const брать из id, а не задавать?

Есть

const TEXT = "Transfer: Вопрос: почему сегодня такая плохая погода<br><br> Ответ: Мы сами не знаем<br>Вопрос: хорошо спасибо<br><br>";
function onClick() {
  const QUESTIONS = TEXT.match(/вопрос:.*?(?=<br>)/gi);
  const QUESTIONS_HTML = QUESTIONS.join("<br>");
  document.getElementById("question").innerHTML = QUESTIONS_HTML;
}
<textarea id=text> </textarea>
<button type="button" onclick="onClick()">Click me</button>
<div id="question"></div>

Который работает от заданного значение TEXT;

Как сделать так что бы значение TEXT бралось из поля textarea?

const TEXT = document.getElementById('text').value;

function onClick() {
  const QUESTIONS = TEXT.match(/вопрос:.*?(?=<br>)/gi);
  const QUESTIONS_HTML = QUESTIONS.join("<br>");
  document.getElementById("question").innerHTML = QUESTIONS_HTML;
  }
<textarea id=text> </textarea>
<button type="button" onclick="onClick()">Click me</button>
<div id="question"></div>

Выдает ошибку.


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

Автор решения: Александр Лесив

Проблема в том, что, когда выполняется код document.getElementById('text'), то textarea хранит пустую строку, и регулярное выражение, которое вы используете на пустой возвращает null, поэтому и ошибка. Чтоб исправить ошибку, вам нужно брать значение непосредственно во время клика по кнопке.

const TEXTElement = document.getElementById('text');

function onClick() {
  const TEXT = TEXTElement.value;
  const QUESTIONS = TEXT.match(/вопрос:.*?(?=<br>)/gi);
  const QUESTIONS_HTML = QUESTIONS.join("<br>");
  document.getElementById("question").innerHTML = QUESTIONS_HTML;
  }
<textarea id=text> </textarea>
<button type="button" onclick="onClick()">Click me</button>
<div id="question"></div>

Теперь если ввести в textarea строку, которая подходит под регулярное выражение, то ошибок не будет.

→ Ссылка