如何使用Javascript获取按钮值

Question

我想弄清楚如何使用 JavaScript 获取按钮的值。在 php 代码中使用 while 语句生成了几个按钮，因此所有按钮的name和id都是相同的。它们之间唯一的区别是价值。

我的 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>";
     }

我想要实现的是，当单击此按钮时，会显示带有此记录详细信息的 JavaScript 警报。

（仅供参考 - “Faker”是该表所属的表单名称。）

我的 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;
            }

        }

我有大约。到目前为止有 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;
            }

        }

但是无论我单击哪个按钮，它总是会返回第一个按钮的值。

我已经做了一些谷歌搜索以及搜索这个网站，但我找不到生成按钮的相同场景。

任何帮助或指示将不胜感激。感谢您的时间 ：）

Answer 1

尝试类似

<script type="text/javascript">
  function getVal(value)
  {

   alert(value);
  }
 </script>
 <input type="button" value="Add" onclick="getVal(this.value)">

Answer 2

请注意，对多个元素使用相同的 id 是无效的 html，尽管大多数（所有？）浏览器往往不会对此大惊小怪，并且它们仍然会非常愉快地显示页面。这就是为什么当你尝试使用document.getElementById("details")它时总是给你第一个带有该 id 的按钮 - 浏览器如何知道你指的是哪一个？

话虽如此，如果您在this单击时传入函数调用：

onClick=\"MCNdetails(this)\"

...这将为该函数提供对所单击的特定按钮的直接引用。那么：

function MCNdetails(btn) {
    var buttonValue = btn.value;

    // etc
}

在这种情况下，你的按钮根本不需要 id。但是，如果您确实保留了 ID，则应该找到一种方法使它们唯一（例如，在每个 ID 的末尾附加一个序列号）。