document.getElementById 没有获取新输入的 HTML 文本输入值答案

【问题标题】：document.getElementById doesn't get newly entered HTML text input valuedocument.getElementById 没有获取新输入的 HTML 文本输入值
【发布时间】：2014-10-22 05:05:02
【问题描述】：

我使用以下代码。

这个想法是打印名称为“PrintThis”的 div 的内容，其中包含文本输入区域“textarea1”。

问题是 getElementById 只返回页面加载的字符串；在这种情况下是“蛋糕”。

如果我通过单击并在页面上输入“textarea1”将“cake”更改为“pie”，那么 printContents 仍然有“cake”而不是“pie”。

<html> 
<head> </head> 
<script type="text/javascript">

function printFunction(divName) {
var printContents = document.getElementById(divName).innerHTML;
//Now call a script to print (not included)
}
</script>
 <body> 
  <div id="printThis" name="printThis">
   <textarea id="textarea1" cols="1" rows="10" style="width:95%!important;" ">cake</textarea>
  </div>

  <input type="button" value="Print Div" onClick="printFunction('printThis')">
</body></html>

在我的生产版本中，我还使用 AJAX 将文本区域值发布回服务器，因此理论上可以使用页面刷新，虽然这不会运行，但我尝试使用这些选项。

document.location.reload(true);
window.top.location=window.top.location;

生产版本也有 jQuery 可用。

【问题讨论】：

尝试使用 jquery val() 函数获取值...
stackoverflow.com/q/14939010/1700321.
好的，我会看一下jQuery选项，但请记住，在生产版本中，printThis Div会有多个元素。
我觉得你想要的和：stackoverflow.com/questions/16818395/…

标签： javascript jquery html

【解决方案1】：

首先，您尝试获取 div 的 innerHTML，而不是实际的 textarea。其次，不要尝试获取 innerHTML，而是尝试使用 value。

http://jsfiddle.net/qdymvjz8/

<div id="printThis" name="printThis">
   <textarea id="textarea1" cols="1" rows="10">cake</textarea>
  </div>
<input type="button" value="PrintDiv" onClick="printFunction('textarea1')">

function printFunction(divName) {
var printContents = document.getElementById(divName).value;
}

【讨论】：

查看我对 user1371641 的评论，如果问题不清楚，再次抱歉。
在访问 div 的 innerHTML 之前，您可以先获取其子项的值，并在获取 div 的值之前更新它们的 innerHTML。我已经更新了小提琴，请检查一下。 function printFunction(divName) { textArea = document.getElementById("textarea1"); textArea.innerHTML = textArea.value; var printContents = document.getElementById(divName).innerHTML; alert(printContents); }

【解决方案2】：

如果您在生产中的 div 中有多个项目，那么您可以遍历 div 的子项并拖出值。

function printFunction(divName) {
  var printContents = document.getElementById(divName),
    childItemCount = 0,
    stringToPrint = '';

 for (childItemCount; childItemCount < printContents.children.length; childItemCount++) {
    stringToPrint += printContents.children[childItemCount].value;
 }

 console.log(stringToPrint);
 //Now call a script to print (not included)
}

【讨论】：

我正在尝试访问生产版本中的整个 'printThis' DIV。问题中给出的示例已简化。抱歉，如果不清楚，谢谢您的回答。
你当然可以对不反映任何值属性（标签、跨度...）的DOM元素使用innerHTML。