Как получить данные из textarea?

Question

[Kirill Ivanov]

Всем привет! Столкнулся с неожиданной трудностью - не могу получить данные из textarea. Везде советуют использовать document.getElementById('textareaID").value, но почему-то это не срабатывает.
Пример: https://codepen.io/pashkevich_d/pen/ExjPNoj .

Подскажите, плиз, что делаю не так.

Comments

[Александр Докин]

Почему не срабатывает? Вы что-то между <textarea>...</textarea> напишите, он и выведет

[Илья Кочкин]

Александр Докин, все огонь работает

[Kirill Ivanov]

Илья Кочкин, Александр Докин, видимо я не совсем корректно сформулировал вопрос тогда. Можно ли как-то получить то, что введено в саму textarea, а не то, что вшито в HTML. Или для этого уже инпуты нужны?

[Александр Докин]

Kirill Ivanov, это одно и то же
Не пойму, что у вас не получается:
Если хотите, чтобы при изменении в консоль выводилось, подпишитесь на событие change.

Answer 1

[Triplicate]

Привет, смотри, у тэга textarea нет атрибута value, его value - это то, что ты вписываешь внутрь его <textarea> Сюда </textarea>
В твоём коде:

let val = document.getElementById("my-area").value;  // Ты инициализируешь переменную val и присваиваешь ей значение
console.log(val);

Но тэг у тебя пустой изначально! Следовательно и значение пустое, поэтому при первом console.log ты получаешь ничего.

• Во-первых, забудь пожалуйста про document.getElementById(), используй document.querySelector('#my-area')
  
• Во-вторых следует повесить событие, если ты хочешь, чтобы переменная получала новое значение при изменении textarea. К примеру, создать кнопку и при клике на неё выводить значение, но советую использовать onchange как сказано выше
  

Вот пример на всякий случай: https://codepen.io/Triplicate/pen/mdJVWgE

Answer 2

[TostPOST]

Как пример, при изменении происходит событие, а потом берется значение с помощью свойства value, у меня все работает.

$(document).ready(function($){
   var $area = $("#my-area");
   $area.on("change",function(event){
     console.log(event.target.value);
   })
});

Comments

[Kirill Ivanov]

похоже на правду, а можно на чистом JS?

[TostPOST]

Ну там все просто вместо document ready, window onload, потом addEventListener, а дальше callback функцию

Answer 3

[KakNaZlo]

что-то такое?
https://jsfiddle.net/14wc5xqs/

Answer 4

[Олег]

Answer 5

[Dimaasik]

Кстати, неочевидный момент для новичков - если в textarea есть значение, но js говорит что - значения нет или выдает ошибку. Так бывает потому что js намного быстрее HTML, для этого можете подвязать считывание текста например к нажатию кнопки или к любому другому событию