Menu
So..i'm having this problem for couple of days not knowing how to do this,and i need help.
I have multiple buttons and clicking all of them is redirecting me to same function and from that function is going to another function specified for that button. Any idea how can i go true couple of functions knowing which button is clicked? example :
<html>
<button type="button" onclick="myFunction()" id="1">Button1</button>
<button type="button" onclick="myFunction()" id="2">Button1</button>
<button type="button" onclick="myFunction()" id="3">Button1</button>
<script>
function myFunction()
{
var x=0;
if (button 1){
x=1;
myFunction1(x);}
if (button 2){
x=2;
myFunction2(x);}
if (button 3){
x=3;
myFunction3(x);}
...
myFunction3(x){
alert(x);
}
}
</script>
</html>
659
So the answer is - yes you can :) However, I'd recommend to use unobtrusive JavaScript.. mixing js with HTML is just nasty.
Answer. As HTML and CSS are designed to be very fault tolerant, most browsers will in fact apply the specified styles to all elements given the same id. However, this is considered bad practice as it defies the W3C spec. Applying the same id to multiple elements is invalid HTML and should be avoided.
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 ids.
References:
element.addEventListener().for () {...} loop.`switch () {...} statement.
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
