Styjun

My function document.getelementbyid is not returning the current value of the textarea from HTML page

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)

In text-area I can edit the existing value and Save that modified value into DB.

When clicked on 'save description' button it is returning 1st element which is passing to text-area but need to get current value of text-area

Escape the ' inside your onClick function call.

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

Your quotations inside your onclick aren't being escaped:

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

When document load your textarea still is empty it show empty at alert. You need set value by 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>

to get a html text area value, you can use the value property:

document.getElementById("id").value

also you have to escape your html quotes:

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

Avoid the limitations and awkward syntax of onevent attributes -- use onevent properties or event listeners instead. The following demo uses an onevent property.

BTW the button is invalid it has two class attributes:

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

Demo

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>