如何使用 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

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

话虽如此，如果您在点击时在函数调用中传递this：

onClick=\"MCNdetails(this)\"

...这将使函数直接引用被单击的特定按钮。那么：

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

    // etc
}

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

Answer 2

试试类似的东西

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

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