getElementById не возвращает текущий текст из текстовой области в функции JavaScript

Question

Моя функция document.getelementbyid не возвращает текущее значение текстовой области со страницы HTML

HTML:

<div class="modal-content">
    <h4 class="modal-title">PersonName</h4>
    <div  id = 'person_name' class="modal-body">
        <p><%=person['person_name']%></p>
    </div>
    <h4 class="modal-title">Person Description</h4>
    <textarea id="person_descr" style="overflow: scroll; height: 
         100px;"></textarea>
    <button name="button" type="button" class="save" 
           class="btn btn-info" 
            onClick="updateDescription('<%=person['person_name']%>')"> 
            save description </button>       
</div>

JavaScript:

function updateDescription(person_name) {
  var person_name = person_name
  var person_descr = document.getElementById("person_descr").value;
  alert(person_name)
  alert(person_descr)
}

В тексте-area Я могу отредактировать существующее значение и сохранить это измененное значение в БД.

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

Answer 1

Ваши цитаты внутри вашего onclick не экранируются:

<button name="button" type="button" class="save" class="btn btn-info" onClick="updateDescription('<%=person[\'person_name\']%>')">save description</button>

Answer 2

Когда документ загружается, ваш textarea все еще пуст, он отображается пустым в alert. Вам нужно установить значение на person_descr.value = person_name;

function updateDescription(person_name){

     var person_name= person_name
     
      var person_descr= document.getElementById("person_descr");
       alert(person_name)
       alert(person_descr.value);
       person_descr.value = person_name;
alert(person_descr.value)
       }

<div class="modal-content">
      <h4 class="modal-title">PersonName</h4>
       <div  id = 'person_name' class="modal-body">
       <p>aaa</p>
       </div>
        <h4 class="modal-title">Person Description</h4>
        <textarea id="person_descr" style="overflow: scroll; height: 
         100px;"></textarea>
          <button name="button" type="button" class="save" 
           class="btn btn-info" 
            onClick="updateDescription('aaa')"> 
            save description </button>       
           </div>

Answer 3

Избегайте ' внутри вашего onClick вызова функции.

onClick="updateDescription('<%=person[\'person_name\']%>')"

Answer 4

Избегайте ограничений и неудобного синтаксиса атрибутов onevent - используйте взамен свойства onevent или прослушивателей событий . В следующей демонстрационной версии используется свойство onevent.

Кстати, кнопка недействительна и имеет два атрибута класса:

<button name="button" type="button" class = "save" class = "btn btn-info" onClick="updateDescription('<%=person['person_name']%>')"> save description </button>

Демо

document.querySelector('.btn').onclick = updateDesc;

function updateDesc(e) {
  var personName = document.getElementById("personName");
  var personDesc = document.getElementById("personDesc");
  console.log(personName.textContent);
  console.log(personDesc.value);
}

* {
  margin: 0;
  padding: 0
}

<div class="modal-content">
  <h4 class="modal-title">Person Name</h4>
  <div id='personName' class="modal-body">
    <p>
      John Doe
    </p>
  </div>
  <h4 class="modal-title">Person Description</h4>
  <textarea id="personDesc" style="overflow: scroll; height: 100px;"></textarea><br>
  <button name="button" type="button" class="btn btn-info save">Save Description</button>
</div>

Answer 5

, чтобы получить значение текстовой области html, вы можете использовать свойство value:

document.getElementById("id").value

, также вы должны экранировать кавычки html:

<button name="button" type="button" class="save" 
       class="btn btn-info" 
        onClick="updateDescription('<%=person[\'person_name\']%>')"> 
        save description </button>