Question

我有一个页面，其中有许多来自PHP输出的按钮，每个按钮都有不同的值：

reload

我想点击它时检查按钮的值，所以我使用下面的原生JS：

<button class='add' value=".$row['cat_no']." onClick='addItem(value)'>Add To Cart</button>

$row['cat_no'] is data from mysql.

它不起作用......它只是返回<script> function addItem(value) { alert("this.value");} </script>在这种情况下，我认为将{1}分配给ID是不合适的，请帮助检查我的错误或建议解决方案。感谢。

请：我不想使用JQUERY，只需原生JS。

Answer 1

如下所示使用alert(elmt.value);。你应该将this传递给函数

＆＃13;

<button class='add' value="test value" onClick='addItem(this)'>Add To Cart</button>

<script>
function addItem(elmt) {
            alert(elmt.value);
            }
</script>

＆＃13;

Answer 2

下面的代码可以帮助您检索触发事件的元素的值：

<button class='add' value="test value" onClick='addItem(this)'>Add To Cart</button>

<script>
  function addItem(sender) {
        alert(sender.value);
  }
</script>

然而，这充满了code smells.

我建议你做以下代码

    <button id='add-to-cart' class='add' value="test value">Add To Cart</button>

在单独的JS文件中：

(function() {
    function _onLoad() {
        var addToCartButton = document.getElementById("add-to-cart");

         addToCartButton.addEventListener("click", _onAddToCartClicked);
    }

    function _onAddToCartClicked() {
        var sender = this;

        alert(sender.value);
    }

    document.addEventListener("DOMContentLoaded", _onLoad, false);
})();

这种方法确保：

关注点在HTML和JS之间分开
将缓存外部JavaScript文件，从而加快页面加载速度。
由于没有内联脚本，UI会呈现更快的速度
全局命名空间不会受到污染

Answer 3

您的功能中并不需要this，只需使用value即可。并且还删除双引号，因为你需要提醒函数的参数，而不是字符串，如下所示：

function addItem(value) {
  alert(value);
}

以下是工作示例：

＆＃13;

function addItem(value) {
  alert(value);
}

＆＃13;

<button class='add' value="yourValue" onClick='addItem(value)'>Add To Cart</button>

＆＃13;

或者您可以使用this将元素传递给函数，然后从addItem方法获取所需的属性值：

＆＃13;

function addItem(item) {
  alert(item.value);
}

＆＃13;

<button class='add' value="yourValue" onClick='addItem(this)'>Add To Cart</button>

＆＃13;

onClick的按钮警报值

3 个答案: