Develop Reference

Using element.click() to simulate a Button Click in Javascript

I'm trying to write an extension for Opera that automatically sends specific chat messages. (Commands, to be exact.) For that, I want to enter the message into the textarea, simulate a button click to send the message and read the reply I get.
I've been trying to use the Element.click() function of JavaScript to simulate the click, but it doesn't work.
My code goes something like this:
document.getElementsByClassName("text-area")[0].value = "test";
document.getElementsByClassName("send-chat-button")[0].click();
The textarea gets filled in with the value I want, but it doesn't click the button.
I am also not getting any output on the console. I'd be glad about any help I can get.
Regards, Kileraptor1
UPDATE: You were right, the button does not have an OnClick event like I thought it had. I'm honestly not sure how it submits a message. Since I am writing a plugin for a website I do not own, I can not edit the source or anything.

The easiest way would be with the trigger() function in jQuery:
$(".send-chat-button:first").click(function()
{
// Whatever actions you want to perform on click
});
$(".send-chat-button:first").trigger("click"); // Executes the click event handler
trigger(event) will execute whatever specified events that are attached to an element at any point in the code.
If you want to use pure JavaScript, there's already a good answer here. As I said though, jQuery makes this extremely simple.

HTML Buttons Aren't Deselecting After Click

I'm making a calculator app for class and I have run into a snag while implementing keyboard listeners. Everything on the keyboard side works properly, but I have found that when I am forced to physically click on a button, such as the more obscure functions which don't have keyboard keys, the button is staying focused. This normally wouldn't be an issue, except that every time I press the 'enter' key to solve the inputted function, the calculator thinks I'm pressing that focused button.
CSS hasn't worked and I can't find anything on Google for how to deactivate this. If it matters, I am using Bootstrap 3 for this. We haven't covered JQuery yet, so I'm hoping for a pure JS way to solve this if it's possible.
Thanks!

Thank you all for the responses. I tried both and my issue was solved, however it took either an extra function or an extra listener. I ended up finding the blur() function and calling it at the end of my switch statement which controls clicks accomplished what I wanted. Thank you again though!

After each mouse click, change the focus back to the equals or solve button, using the focus() method. That way when the user does eventually press enter, your code will think they're clicking the solve button

You can use an event handler like bind -> keypress just for Enter key.
$(document).ready(function(){
$(document).bind('keypress',pressed);
});
function pressed(e){
if(e.keyCode === 13){
//Call your result function here
}
}

Is there an event for the browser's back button being pressed?

I am supporting an e-commerce app, which pretty much makes and submits orders.
A user found that if they submit their order, and press back really quickly, they can cause an error condition.
I want to prevent this. When the user clicks submit, I want to bind some kind of event to the browser's back button that instead will redirect them to the Index page. However, after about two hours of Googling (including a few StackOverflow topics), I have not found any clear way of influencing the behavior of the back button.
I briefly attempted to use history.pushState(), but as the HTML 5 documentation mentions, that will not cause a redirect; it merely alters the displayed URL/state.
Similarly, the history.onpopstate event appears unhelpful, because it occurs whenever a state is removed from the history listing; I'm looking for an event that occurs whenever the history listing is traversed backwards.
Question: Does an event for the browser's back button, or at least a way to prevent this particular stupid user trick exist?

You can't listen to the browser back button because it's outside of your reach (it's not part of the DOM).
What you can do is fix the previous page so that it detects if you've used the back button.
Without more information I can't give you any tips on how to achieve that.
Also, an error condition is not necessarily a bad thing. Just make sure it's clear what is happening: the error message should make sense.

Wrong answer...
Instead listen to window.onBeforeUnload and ask the user if he knows what he is doing. Return false if not. This is usually done via a confirm dialogue

How can I run different functions when clicking and double clicking using JavaScript?

Simply put:
what I want:
you click something calls function xxx(), while you double click calls another function yyy()
when I put onclick and ondblclick together only xxx() executed, so how do I achieve the similar effect?
Thanks!!

The problem is that, in some browsers, your onclick handler grabs the first click of the pair, and the ondblclick handler never sees the action. In other browsers the click is seen twice and the double click as well. The potential timing for a double click will vary by operating system, browser, and user configuration.
Handling this in a portable way is, to say the least, difficult.
I would recommend only having click handlers. But have the click handler set a variable, and a timeout. If the timeout is hit without a second click, do the onclick action. If a second click happens in that time, make sure that the timeout will do nothing and do the ondblclick action. The drawback is that this means that your double clicks won't respect the rules of the local operating system, browser, and user configuration.

Try this out:var dbclkTimeout=-1;
somelement.onclick=function(){
if(dbclkTimeout==-1)
dbclkTimeout=setTimeout(function(){onclickcallback();dbclkTimeout=-1;} , 200);
else {
clearTimeout(dbclkTimeout);
dbclkTimeout=-1;
ondbclickcallback();
}
}

javascript event

I have an interesting question, i hope..I have a textarea in my form..when a user comes to enter values in it it displays some cached values in an autocomplete format..thats fine..I want to call an ajax function after the user selects such a cached value in it..so that the ajax call should pass this selected value..so my question is on which can i get the final selected value, so i call ajax at that time,... i tried with onblur etc, but not worked..
help please..
thanks in advance...

If the user chooses by clicking, you want a 'click' handler on the element the user is selecting (or a containing element).
If the user can select in other ways, eg by the keyboard, then you'll need to observe other events as well.

You mean you want to detect if the user selects a value the browser's native Autocomplete lookup, instead of typing it in themselves?
I'm certain there is no event to catch this.
The only workaround that comes to mind is analyzing the keypress events the user makes in the input field. If the keys entered do not match the full string that is in the text field, and no onpaste event was fired, it stands to reason that the value was selected from an Autocomplete.
This is going to be tough to implement, though, and by no means 100% reliable.

As Pekka said above, there will likely be browser-specific events to handle for this kind of functionality, but it is possible.
For IE, check out Why does the javascript onchange event not fire if autocomplete is on? for a reference to the "onpropertychange" event within IE.
For Firefox, it looks like others have solved it through a combination of onBlur and onFocus (see FireFox capture autocomplete input change event).
If you do come up with a cross-browser solution, please let us know!