如何在javascript中获取文本区域的值答案

【问题标题】：How to obtain the value of a text area in javascript如何在javascript中获取文本区域的值
【发布时间】：2019-07-18 19:40:15
【问题描述】：

我正在尝试在单独的 javascript 文件中获取表单上特定文本区域的值。

我已尝试此 stackoverflow 链接中指定的代码： Get textarea by name attribute

但是我仍然得到了 null，作为输出。

我的代码如下：

 <td>
  <textarea name="key_input" rows="4" cols="50">
    testData
  </textarea>
 </td>

在我的 js 中：

var key_Data = document.getElementById("key_input").value;

这是我尝试获取key_input数据的另一种方式，但我仍然不成功。

任何帮助将不胜感激提前致谢。

【问题讨论】：

getElementById 将通过“id”而不是“name”获取对象，因此不会在您的代码中找到任何元素。
将 id 作为id="key_input" 提供给 textarea
如果您想知道为什么链接的 SO 问题中的代码对您不起作用，那么该问题是关于使用 jQuery 库（扩展了 javascript）。如果您不使用该库，则该样式的代码将无法在您的页面上使用。
@Cat 我也这么认为，但奇怪的是 OP 在这个问题中标记了 jQuery。在那种情况下，你会假设他们正在使用它。

标签： javascript html

【解决方案1】：

您正在搜索一个不存在的 Id，请将名称更改为 id。

id="key_input"

而且，仅创建 var 并不会显示它。

var key_Data = document.getElementById("key_input").value;
console.log(key_Data);

<td>
  <textarea id="key_input" rows="4" cols="50">
    testData
  </textarea>
 </td>

【讨论】：

【解决方案2】：

使用document.querySelector('[name="key_input"]'):

console.log(document.querySelector('[name="key_input"]').value);

<td>
  <textarea name="key_input" rows="4" cols="50">
    testData
  </textarea>
 </td>

【讨论】：

【解决方案3】：

您可以将特定的id 属性添加到您的textarea 元素并使用Document.querySelector()：

const textareaElem = document.querySelector('#key_input');

console.log(textareaElem.value)

<textarea id="key_input" name="key_input" rows="4" cols="50">
    testData
</textarea>

【讨论】：

【解决方案4】：

你可以使用jquery来简单地做到这一点

console.log($('#key_input').val())

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td>
  <textarea name="key_input" rows="4" cols="50" id="key_input">
    testData
  </textarea>
 </td>

【讨论】：

【解决方案5】：

在您的文本区域元素中包含属性“id”

<td>
  <textarea name="key_input" id="key_input" rows="4" cols="50">
    testData
  </textarea>
 </td>

还有你的 js

var key_Data = document.getElementById("key_input").value;

【讨论】：

【解决方案6】：

function test(){
			alert(document.getElementsByName("key_input")[0].value)
		}

<textarea name="key_input" rows="4" cols="50">
    testData
  </textarea>
  <input type="button" onclick="test()" value="get data" />

你可以使用上面的代码来获取textarea的值

【讨论】：