I am trying to pass attributes and their values to javascript function from onclick event but they are returned undefined.
<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>
You cannot access those custom attributes directly like that. You need to access them through the attributes property of the element. Try this:
<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>And if you're trying to get the values of those attributes, try this:
<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>
I suggest you add id to the button element and then bind click event listener using that 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;
}
I recommend this approach over inlined onclick javascript event because this way you keep separated the html from the javascript. The html is reponsible for the view and representing the data. The javascript is responsible for the interactions with the view and the functionality. This way the representation of the data and the functionality are separated and distinct.
