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绑定click事件监听器：

// 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函数

2 个答案: