Question

我的函数document.getelementbyid没有从HTML页面返回textarea的当前值

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)
}

在文本区域中，我可以编辑现有值并将修改后的值保存到数据库中。

当点击“保存描述”按钮时，它将返回第一个元素，该元素将传递到文本区域，但需要获取文本区域的当前值

Answer 1

在'函数调用中转义onClick。

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

Answer 2

您的onclick中的引号不会被转义：

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

Answer 3

当文档加载时，您的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 4

要获取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>

Answer 5

避免onevent attributes的局限性和语法笨拙，请改用onevent properties或event listeners。以下演示使用了onevent属性。

该按钮无效，它具有两个类属性：

<button name="button" type="button" class =“保存” 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>

getElementById不从javascript函数中的文本区域返回当前文本

5 个答案:

演示