将 onclick 控件发送到 javascript 函数

Question

我试图将属性及其值从 onclick 事件传递给 javascript 函数，但返回时未定义。

<script type="text/javascript">

function addParameters(control) {
         alert(control._userid);
        alert(control._flag);
}

<button text="Button" ID="btn1" _userid="datatest" _flag="datafromdatabaase" title="Add this to the list" onclick="addParameters(this);"> Button</button>

Answer 1

您不能像那样直接访问那些自定义属性。您需要通过元素的 attributes 属性访问它们。试试这个：

<button text="Button" ID="btn1" _userid="datatest" _flag="datafromdatabaase" title="Add this to the list" onclick="addParameters(this);"> Button</button>

<script type="text/javascript">

function addParameters(control) {
  alert(control.attributes._userid);
  alert(control.attributes._flag);
}
</script>

如果你想获取这些属性的值，试试这个：

<button text="Button" ID="btn1" _userid="datatest" _flag="datafromdatabaase" title="Add this to the list" onclick="addParameters(this);"> Button</button>

<script type="text/javascript">

function addParameters(control) {
  alert(control.attributes._userid.nodeValue);
  alert(control.attributes._flag.nodeValue);
}
</script>

Answer 2

我建议您将 id 添加到按钮元素，然后使用该 id 绑定点击事件监听器：

// Html
<button id="btn1" _userid="1" flag="true"> </button>

//Javascript
document.getElementById("btn1").addEventListener('click', click);

function click(event){
    var attrs = event.target.attributes;
    var userid = attrs._userid;
    var flag = attrs._flag;
}

我推荐这种方法而不是内联的 onclick javascript 事件，因为这样你就可以将 html 与 javascript 分开。 html 负责视图和表示数据。 javascript 负责与视图和功能的交互。通过这种方式，数据的表示和功能是分离和不同的。

将 onclick 控件发送到 javascript 函数

sending onclick control to javascript function

javascript

parameters

attributes

function