javascript 如何使用Javascript获取按钮值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13132252/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get button value using Javascript
提问by Andrew Fox
I am trying to figure out how to get the value of a button using JavaScript. There are several buttons generated using a while statement in php code, so the nameand idare the same for all of them. The only difference between them is the value.
我想弄清楚如何使用 JavaScript 获取按钮的值。在 php 代码中使用 while 语句生成了几个按钮，因此所有按钮的name和id都是相同的。它们之间的唯一区别是价值。
Part of my php code:
我的 php 代码的一部分：
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td align=\"center\"><input type=\"button\" id=\"details\" name=\"details\" value=\"" . $row['mcn'] . "\" onClick=\"MCNdetails()\"></td>";
echo "</tr>";
}
What I'm trying to achieve is that when this button is clicked a JavaScript alert is displayed with this records details.
我想要实现的是，当单击此按钮时，会显示带有此记录详细信息的 JavaScript 警报。
(FYI - "Faker" is the form name that this table is a part of.)
（仅供参考 - “Faker”是该表所属的表单名称。）
My JavaScript code:
我的 JavaScript 代码：
function MCNdetails()
{
var buttonDetails = document.Faker.details;
var buttonValue = buttonDetails.value;
if (buttonValue === "2700-2057" )
{
alert ("Details are here");
return;
}
else
{
alert ("No Dice " + buttonValue);
return;
}
}
I have approx. 300 records so far. When I click on ANY of the buttons I always get the else statement. I did try getting the element by id like this:
我有大约。到目前为止有 300 条记录。当我点击任何按钮时，我总是得到 else 语句。我确实尝试通过 id 获取元素，如下所示：
function MCNdetails()
{
var buttonDetails = document.getElementById("details");
var buttonValue = buttonDetails.value;
if (buttonValue === "2700-2057" )
{
alert ("Details are here");
return;
}
else
{
alert ("No Dice " + buttonValue);
return;
}
}
But that would always return the value of the first button regardless of which one I clicked.
但是无论我单击哪个按钮，它总是会返回第一个按钮的值。
I have done some Google searching as well as searching this site and I can't find this same scenario where the buttons are generated.
我已经做了一些谷歌搜索以及搜索这个网站，但我找不到生成按钮的相同场景。
Any help or pointers would be appreciated. Thank you for your time :)
任何帮助或指示将不胜感激。感谢您的时间 ：）
回答by NullPoiиteя
try something like
尝试类似的东西
<script type="text/javascript">
function getVal(value)
{
alert(value);
}
</script>
<input type="button" value="Add" onclick="getVal(this.value)">
回答by nnnnnn
Note that using the same id for more than one element is invalid html, though most (all?) browsers tend not to make a fuss about it and they'll still display the page quite happily. That's why when you tried to use document.getElementById("details")it always gave you the first button with that id - how would the browser know which one you meant?
请注意，对多个元素使用相同的 id 是无效的 html，尽管大多数（所有？）浏览器往往不会对此大惊小怪，它们仍然会非常愉快地显示页面。这就是为什么当你尝试使用document.getElementById("details")它时总是给你第一个带有该 id 的按钮 - 浏览器如何知道你指的是哪个？
Having said that, if you pass thisin the function call on click:
话虽如此，如果您this在单击时传入函数调用：
onClick=\"MCNdetails(this)\"
...that will give the function a direct reference to the particular button that was clicked. So then:
...这将使函数直接引用被单击的特定按钮。那么：
function MCNdetails(btn) {
var buttonValue = btn.value;
// etc
}
In which case your buttons don't really need ids at all. But if you do keep the ids you should find a way to make them unique (e.g., append a sequence number to the end of each).
在这种情况下，您的按钮根本不需要 ID。但是，如果您确实保留了 id，您应该找到一种方法使它们独一无二（例如，在每个 ID 的末尾附加一个序列号）。
