Как очистить textaria с помощью javascript?

Question

[nsmilyk]

Есть код html который показывает поле для ввода текста и кнопку, которая должна его очистить.

<div style="border-bottom: 1px solid #e8e7f6">
                                            <div class="row justify-content-center">
                          <div class="col-md-8">

                              <h4 style="color: #2d3138" class="text-center">Поле</h4>

                              <div style="margin-top:40px; margin-bottom: 20px" class="reviews-error">
                                  <form method="post" enctype="multipart/form-data">
                                      <input type="hidden" name="Rating" value="5" />
									 
                                      <div class="row">
                                          <div class="col-md-12">
                                              <div style="margin-bottom: 20px;width:100%;" class="form-input">
                                                  <textarea  style="height: auto;min-width: 100%;max-height: 300px" class="textarea" rows="3" name="Text" placeholder="Ваше сообщение"></textarea>
                                              </div>
                                          </div>
                                      </div>

                                      <div class="row">
                                          <div class="col-md-6">
                                              <div class="input-file-container">
                                         
                                              </div>
                                          </div>
                                          <div class="col-md-6">
										  <a class="button-style button-style_blue button-style_medium"  data-toggle="modal" data-target="#calculator" id="Calc1" href="#">Очистить</a>
                                          </div>
                                      </div>
                                  </form>
                              </div>
                          </div>
                      </div>
                      
                      </div>

Необходимо с помощью javascript сделать так чтобы при нажатии на кнопку текст очищался. Как это можно сделать?
*Как видите кнопка помимо стирания вызывает окно по #. (как мне кажется это осложняет задачу)

Answer 1

[Сергей delphinpro]

Comments

[nsmilyk]

А если в форме будет предположим 2 значения (текст и имя), то как это будет выглядеть?

Answer 2

[Шохрух Шаймардонов]

textAreaElem.value = ""
Привяжите к событию клика кнопки

Comments

[nsmilyk]

Вот так не получается, что тут неправильно?

<div style="border-bottom: 1px solid #e8e7f6">
                                            <div class="row justify-content-center">
                          <div class="col-md-8">

                              <h4 style="color: #2d3138" class="text-center">Поле</h4>

                              <div style="margin-top:40px; margin-bottom: 20px" class="reviews-error">
                                  <form method="post" enctype="multipart/form-data">
                                      <input type="hidden" name="Rating" value="5" />
									 
                                      <div class="row">
                                          <div class="col-md-12">
                                              <div style="margin-bottom: 20px;width:100%;" class="form-input">
                                                  <textarea  style="height: auto;min-width: 100%;max-height: 300px" class="textarea" rows="3" name="Text" placeholder="Ваше сообщение"></textarea>
                                              </div>
                                          </div>
                                      </div>

                                      <div class="row">
                                          <div class="col-md-6">
                                              <div class="input-file-container">
                                         
                                              </div>
                                          </div>
                                          <div class="col-md-6">
										  <a class="button-style button-style_blue button-style_medium" onclick="clear();"  data-toggle="modal" data-target="#calculator" id="Calc1" href="#">Очистить</a>
                                          </div>
                                      </div>
                                  </form>
                              </div>
                          </div>
                      </div>
                      
                      </div>

function clear() {
    document.textAreaElem.value = "";
}

[alexalexes]

Чтобы манипулировать элементами страницы, вам нужно изучить, как правильно пользоваться методами:
getElementById()
getElementsByClassName() (обратите внимание почему Elements, а не Element)
getElementsByTagName (тоже самое)
querySelector()
querySelectorAll()

[nsmilyk]

alexalexes, Потому и спрашиваю что перепробовал то что выдает яндекс по запросу.

[alexalexes]

Давайте по аналогии.
document - это озеро.
Элемент textarea - это интересуемая конкретная особь рыбы, которая плавает в озере document.
Чтобы ее выловить, нужно использовать что-то из рыболовного инвентаря:

getElementById()
getElementsByClassName()
getElementsByTagName()
querySelector()
querySelectorAll();

Есть удочки, которые достают ровно одну рыбу:

var elem_1 = document.getElementById('my_fish');
var elem_2 = document.querySelector('textarea');

Однако, чтобы document.getElementById('my_fish') ловил нужную особь, необходима чтобы эта особь в документе имела искомый атрибут id:
<textarea id="my_fish"></textarea>
Метод document.querySelector('textarea') выловит первую попавшуюся рыбу.
Однако, если textarea будет несколько в документе, чтобы использовать его, вам нужно быть уверенным, что интересуемая особь либо будет единственная на странице, либо идти первым по структуре документа.
Собственно, если что-то поймалось, то можно с этим что-то сделать:

elem_1.value = 'добавили текст в textarea';
elem_2.value = 'добавили текст в textarea';

Далее, есть рыболовные сети:

var elements_1 = document.getElementsByClassName('fishes');
var elements_2 = document.getElementsByTagName('textarea');
var elements_3 = document.querySelectorAll('form div.row div textarea');

Для getElementsByClassName нужно, чтобы рыбы имели такой опознавательный знак:
<textarea class="fishes"></textarea>
Метод getElementsByTagName('textarea') извлекает из озера все то, что имеет тег textarea.
Метод querySelectorAll('form div.row div textarea') извлекает рыбу, которая залегает по определенному CSS-признаку.
Отличительная особенность этих методов в том, что они могут поймать не одну рыбку за один присест, а несколько, поэтому, чтобы взаимодействовать с конкретной извлеченной рыбкой, нужно обратиться в рыбный садок по индексу:
elements_1[0].value = "добавили текст в textarea";

[nsmilyk]

alexalexes, благодарю! Куда понятнее.