Testing : Buttons

Thanks to the answers here, I realized that my variable was not named "id", but "value". So, now it works. Thanks.

4 Answers 4

But this question shows a minimum research effort, because it has been answered multiple times here, and a simple search would suffice:

Thanks. I have read many of the other threads, and quite a few more. But I have missed one thing, my variable is not named "id", it's named "value". So, obviously it would not work no matter what I tried. So the reason for asking, was not because lack of searching, but rather lack of js/jq experience. The answers here showed me that it should work, so there had to be some other mistake. Then I found the error.

Источник

onClick to get the ID of the clicked button

You need to send the ID as the function parameters. Do it like this:

B1 B2 B3 function reply_click(clicked_id) 

This will send the ID this.id as clicked_id which you can use in your function. See it in action here.

I just wanted to note, for anyone getting a null reference exception using JQuery's event.target.id (for me, both Firefox and IE were throwing it), this is a great solution that works in all three major browsers.

Brother , you are the only person on the internet that managed to interpret for me the way this works. Using a variable in the function name and than using another in the actual function script made absolutely no sense to me ! In one short sentence you explained to me that the variable we put in the function brackets () and the one we use on the function declaration are the same thing , just passed on AS ! This is brilliant ! Thank you my lord for the wisdom you have bestowed upon me

In general, things are easier to keep organized if you separate your code and your markup. Define all of your elements, and then in your JavaScript section, define the various actions that should be performed on those elements.

When an event handler is called, it's called within the context of the element that was clicked on. So, the identifier this will refer to the DOM element that you clicked on. You can then access attributes of the element through that identifier.

Button 1 Button 2 Button 3  

what if the buttons are in a repeater and therefore generated dynamically, so you dont know how many buttons you will have?

There are a number of ways you could handle that. For example, generate the javascript dynamically. Or, add the same class to all of the buttons, and then iterate through all buttons with that class name and attach the handler that way.

@JasonLeBrun I don't know what is the id of the element that I am gonna click. That's what I am looking for. A code draws a SVG element and when I click on it, I need to know it's "id" attribute. If and how can this code be used?

I know this is an old thread but on my modern browser (FireFox 78) your implementation of this did not work as intended. My function is triggered by an onkeyup event of an input text box, but this was using the window node. Instead, I had to use event.srcElement

USING PURE JAVASCRIPT: I know it's late but may be for the future people it can help:

In the Javascipt Controller:

This way we don't have to bind the 'id' of the Element at the time of calling the javascript function.

I like this idea for dynamic functionality. I'm working on adding functions to a dynamic DB using PHP/MySQL and JS; this works out well for adding a specific function to specific dynamic classes. Thanks!

@Prateek Firefox, latest. I only needed the source, so I worked around it now by passing this as parameter in onClick (actually, not using onClick but onChange, is that maybe the problem?). I've also checked around a bit and there seems to be a lot of confusion about this event variable going around - is it an "implicit" parameter or does it have to be stated explicitly as argument (i.e. function reply_click(event) , which I've also seen in some locations)? Is it only available when assigning the event listener via addEventListener . I've played around, but couldn't get it to work.

(I think the id attribute needs to start with a letter. Could be wrong.)

You could go for event delegation.

. but that requires you to be relatively comfortable with the wacky event model.

This won't work. You've specified code in the onclick attribute that calls reply_click with no arguments. So, no event argument will be passed to the function.

@Jason Actually, in all the good modern browsers, the e argument is generated automatically. If it isn't, then we must be dealing with IE6-8, which instead provides that useful object via window.event .

Thanks this worked for me even when my id were dynamic and no other answer seemed to work. Thanks a lot.

How to do it without inline JavaScript or external libraries

it is generally recommended to avoid inline JavaScript, but rarely is there an example of how to do it.
Here is my way of attaching events to buttons.
I'm not entirely happy with how much longer the recommended method is compared to a simple onClick attribute.

Modern browsers (2015+)

• Works before the document has finished loading.
• Very efficient.
• Separates JS from HTML.
• JS is in the

const Listen = (doc) => < return < on: (type, selector, callback) =>< doc.addEventListener(type, (event)=>< if(!event.target.matches(selector)) return; callback.call(event.target, event); >, false); > > >; Listen(document).on('click', '.btn', function (e) < let div = document.createElement("div"); div.innerHTML = "click " + e.target.id + "!"; document.body.appendChild(div); >);

Button 1 Button 2 Do nothing

2014 browsers only

  < return < on: (event, className, callback) =>< doc.addEventListener('click', (event)=>< if(!event.target.classList.contains(className)) return; callback.call(event.target, event); >, false); > > >; OnEvent(document).on('click', 'btn', function (e) < window.console.log(this.id, e); >); 

2013 browsers only

Cross-browser

Cross-browser with jQuery

You can run this before the document is ready, clicking the buttons will work because we attach the event to the document.

Here is a jsfiddle
For some strange reason the insertHTML function does not work in it even though it works in all my browsers.

You can always replace insertHTML with document.write if you don't mind it's drawbacks

Источник

Which mouse button was clicked onmouseup in javascript?

There are two properties for finding out which mouse button has been clicked: which and button . Please note that these properties don’t always work on a click event. To safely detect a mouse button you have to use the mousedown or mouseup events.

which is an old Netscape property. which will give below values for mouse buttons.

Left button - 1 Middle button - 2 Right Button - 3 

No problems, except its meager support (and the fact that it’s also used for key detection).

Now button has been fouled up beyond all recognition. According to W3C its values should be:

Left button – 0 Middle button – 1 Right button – 2 

According to Microsoft its values should be:

Left button – 1 Middle button – 4 Right button – 2 

No doubt the Microsoft model is better than W3C’s. 0 should mean “no button pressed”, anything else is illogical.

Besides, only in the Microsoft model button values can be combined, so that 5 would mean “left and middle button”. Not even Explorer 6 actually supports this yet, but in the W3C model such a combination is theoretically impossible: you can never know whether the left button was also clicked.

and to check which type of button is clicked always use feature detection for which and button properties

if (e.which) < // old netsapce implementation consoel.log((e.which == 3) + ' right click'); >else if (e.button) < // for microsoft or W3C model implementation consoel.log((e.button == 2) + ' right click'); >

Источник

Javascript, get the name of a clicked button

Trying to get the id or name of the button that has been clicked. But I only get an undefined message in the popup when I try to access the id or name of the button. Could someone point me in the right direction to get this working?