Using multiple buttons on same function that redirects to different functions
Easiest way would probably be to pass in the element into the function:
<button type="button" onclick="myFunction(this)" id="1">Button1</button>
<button type="button" onclick="myFunction(this)" id="2">Button1</button>
<button type="button" onclick="myFunction(this)" id="3">Button1</button>
function myFunction(elem) {
alert(elem.id);
}
No need to think about event arguments or anything like that.
At its simplest:
<button type="button" onclick="myFunction(this)" id="1">Button1</button>
<button type="button" onclick="myFunction(this)" id="2">Button1</button>
<button type="button" onclick="myFunction(this)" id="3">Button1</button>
function myFunction (button) {
var x = button.id;
switch (x) {
case '1':
myFunction1(x);
break;
case '2':
myFunction2(x);
break;
case '3':
myFunction3(x);
break;
default:
return false;
}
}
JS Fiddle demo.
Though I'd amend the above to use unobtrusive JavaScript, moving the JavaScript event-handling from the elements' HTML mark-up:
var buttons = document.getElementsByTagName('button');
for (var i = 0, len = buttons.length; i < len; i++) {
buttons[i].onclick = function (){
myFunction (this);
}
}
JS Fiddle demo.
Or, to make it even easier (and add the event-handling to one element, rather than three):
function myFunction (event) {
var x = event.target.id;
console.log(event.target, x);
switch (x) {
case '1':
myFunction1(x);
break;
case '2':
myFunction2(x);
break;
case '3':
myFunction3(x);
break;
default:
return false;
}
}
var parent = document.getElementById('parentElementID');
parent.addEventListener('click', myFunction);
JS Fiddle demo.
Incidentally, while it's valid (under HTML 5, not under HTML 4) to have an id
that starts with a numeric character (0-9), in CSS it's difficult to target those elements (leading numeric characters require escaping, in any one of various ways); so it's still advisable to have a predictable alphabetic prefix to those id
s.
References:
element.addEventListener()
.for () {...}
loop.`switch () {...}
statement.