Javascript - 如何在按钮的 onClick 中访问文本字段的值？答案

【问题标题】：Javascript - How to access the value of a text field in the onClick of a button?Javascript - 如何在按钮的 onClick 中访问文本字段的值？
【发布时间】：2012-02-22 23:11:33
【问题描述】：

我只想知道如何在按钮的 onClick 中获取文本字段的值。我得到了这个：

<INPUT TYPE="text" NAME="GetLink_textField" VALUE="Geben Sie den Dateipfad an!" SIZE=50>
<INPUT TYPE="button" NAME="GetLink_button" VALUE="Get link" onClick="getLinkToFile(?????)">

我想将文本字段 GetLink_textfield 的值传递给函数。我该怎么做呢？我试过 GetLink_textfield.value 但这不起作用。

【问题讨论】：

尝试使用'this'变量来引用刚刚被点击的对象
hackartist：OP 没有尝试访问被点击的对象。 OP 能够通过 this 获得他们想要的对象的唯一方法如下： this.previousSibling.value;不理想。

标签： javascript button onclick textfield

【解决方案1】：

GetLink_textfield.value 不起作用的原因是没有名为 GetLink_textfield 的对象。

您将需要使用以下代码：

function getLinkToFile() {
  var e = document.getElementsByName('GetLink_textField')[0];
  var val = e.value;
  // Do the rest here
}

【讨论】：

但请注意，元素名称与 id 不同，不必是唯一的。如果您的页面多次出现该名称，您将需要有一种方法来确定适用哪个名称。
完全正确。名称不需要唯一，而 ID 则需要。如果您有多个实例，'e' 可能不在上面定义的第 0 个索引上。建议为对象分配一个唯一的 ID。

【解决方案2】：

document.getElementsByName("GetLink_textField")[0].value

但是，如果您给文本字段一个 ID 并使用 document.getElementById("GetLink_textField") 可能会更好。

这样，您将获得对象，而不是包含它的数组，因为 ID 必须是唯一的，但名称不是。

【讨论】：

【解决方案3】：

在文本字段中添加一个 ID 属性，然后在 javascript 函数中使用该 ID 来获取值。您不需要发送任何争论。示例-

function getLinkToFile(){
       var textVal=document.getElementById('idname').value;
}

【讨论】：

【解决方案4】：

如果您以编程方式生成输入或想要使用多于 1 组（输入按钮、输入文本）的元素，请尝试执行以下一些棘手的操作：

执行“for”或其他操作，并将“for”变量（通常称为“i”）附加到输入文本名称、按钮和 javascript 函数，结果将生成如下内容：

<INPUT TYPE="text" NAME="GetLink_textField_0" VALUE="Geben Sie den Dateipfad an!" SIZE=50>
<INPUT TYPE="button" NAME="GetLink_button_0" VALUE="Get link" onClick="getLinkToFile(0)">

<INPUT TYPE="text" NAME="GetLink_textField_1" VALUE="Geben Sie den Dateipfad an!" SIZE=50>
<INPUT TYPE="button" NAME="GetLink_button_1" VALUE="Get link" onClick="getLinkToFile(1)">

<INPUT TYPE="text" NAME="GetLink_textField_2" VALUE="Geben Sie den Dateipfad an!" SIZE=50>
<INPUT TYPE="button" NAME="GetLink_button_2" VALUE="Get link" onClick="getLinkToFile(2)">

然后在你的函数中：

function getLinkToFile(position){
   var inputVal = document.getElementsByName("GetLink_textField_" + position)[position].value;
   //now you got inputVal of the element in the position you want.
}

希望这会有所帮助，如果这不是您所需要的，您可以尝试上面的示例。

另外，建议您使用 Id 作为您的输入。

问候！

【讨论】：