alert or log click function content - javascript

The following code:
alert(document.getElementById("div").click());
runs the click function. But I want to alert or log the content of such a function. What have i to do instead?

The click method is a DOM Level 2 method for <input> elements with type "button", "checkbox", "radio", "reset", or "submit" (see: DOM-Level-2-HTML: click method and HTMLElement.click() on MDN).
The click method (function) itself is implemented natively by the browser. It means that you can try to print its content with:
alert(document.getElementById("div").click);
(note no parentheses after click) but all you will get is:
function click() { [native code] }
which is probably not what you want.
Are you sure you don't want to get the source of click event handlers instead of a click method?

To print out the content of the function, you have to execute:
console.log(document.getElementById("div").click)
Then go to the console of Dev Tools, where you will find a reference to the source code of logged function, or just the source, if it's native browser's implementation.
console.log(''.toLocaleLowerCase)
toLocaleLowerCase() VM222:2
console.log($);
e(e, e) VM227:2

If I understand, you want to actually alert the source code of the click function, yes?
Just remove the parentheses, which are what tells javascript to run the function rather than reference the function:
alert(document.getElementById("div").click);

Related

How can you find the source for an "onevent" handler in HTML, without the event listeners panel?

I'm looking at an element that has several event handlers added to it the old-fashioned way--
<input onblur="doSomething()" onkeyup="doSomethingElse()">
When I check the event listeners panel in the inspector, it is entirely empty.
Is there a way to find the code for these in the page's source besides manually ctrl+f'ing for the function names?
You could use the toString method in your console:
doSomething.toString()
Or you could find it via the debugger:
function findMyCode(element){
debugger
element.onblur.call(element);
}
findMyCode(document.getElementById('idOfYourInput'));
Then step into the function call.
This is fixed in Chrome 70. Here's a screenshot of Chrome DevTools showing the registered event handlers for the selected input element,
And to find the source code for those function, just copy-paste the function name in the console, and press enter - you'll get the source code for those function.
Or, you can do a quick search by pressing Ctrl+Shift+F, which will open up the search panel. Now, check the regular expression box and type "function\s*doSomething\s*\(" and press Enter. This will take you directly to the function definition.

Overriding native Javascript alert function to capture onbeforeunload alerts

My question is not about how to override the alert function and then decorate it as you want. My problem is that when you override the alert function like this:
window.alert = function(str){console.log('alert is called: '+ str);}
For a page with a registered handler for onbeforeunload event like this:
window.onbeforeunload= function(){return 'bye!';}
It is supposed to pop up an alert box with the string "bye" before leaving a page and you could catch it using your custom alert function. But the problem is that your custom alert function won't be called in this case. It looks like the browser is calling another alert function to put your string there. How can I override that alert function?
According to MSDN
Remarks When a string is assigned to the returnValue property of
window.event, a dialog box appears that gives users the option to stay
on the current document and retain the string that was assigned to it.
The default statement that appears in the dialog box, "Are you sure
you want to navigate away from this page? ... Press OK to continue, or
Cancel to stay on the current page.", cannot be removed or altered.
this is not an alert, it is a confirm box which browser provides and we can not alter that. please find the link https://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx

JQuery event handler executing on page load

I have some html on my page, and in my head I have $("#someelement").click(alert("click"));. Whether #someelement exists or not, when I load the page for some reason the alert goes off. However, it doesn't execute when I have $("#someelement").click(function(){alert("click")});. Why is that?
alert("foo") will always alert foo immediately, it does not return a function that you can pass as an event handler. You need to pass a function into the jQuery event binding method instead.
$("#someelement").click(function(){
alert("click");
});
Additionally, if this code is in the <head></head>, it needs to be wrapped in $(document).ready().
$(document).ready(function(){
$("#someelement").click(function(){
alert("click");
});
});
alert is a method defined on the window object, such as, window.alert. It expects one parameter that is a string, and it must be a member of the window object. placing ("string") after alert, such as alert("string") will execute that function, resulting in the popup window with "string". The same thing happens when you place alert("string") as a parameter to a function, a popup window happens when said code runs.
Try this:
$(document).ready(function() {
$("#someelement").click(function(){alert("click")});
});
Here is a working Fiddle

ajax called onClick needs to be clicked twice only on firefox

I made a simple ajax live search in PHP and javascript.
I used standard js ajax call script such as the one from w3schools.
http://www.w3schools.com/ajax/ajax_aspphp.asp
The function basically gets called onkeyup and php file returns a list of results such as the following:
<a href='javascript:void(0)' onCLick='example()'>example</a>
The problem is that the function exampe() gets called with a single click on ie and chrome whereas on firefox, it requires a double click to call exampe() (as if the page is not focused).
Is this a known issue with firefox? Does anyone experience something similar?
This fiddle http://jsfiddle.net/steveukx/GVbZU/ shows the code you've got above working fine, are you sure that the function you're calling as the onclick handler exists? Firebug (or the Firefox built in console) should give you a pointer to any errors being thrown by your JavaScript.
Instead of using the onclick attribute, you could event listeners attached by JavaScript instead, for example:
HTML:
<a id="exampleLink" href="#">example</a>
JavaScript
function example(evt) {
// function run in the scope of the anchor element
}
document.getElementById('exampleLink').addEventListener('click', example, true);
Note: the example above assumes that you're not supporting IE <= 7, if you are, then you should check for the existence of addEventListener or the IE specific attachEvent instead, see http://www.quirksmode.org/js/events_advanced.html

<a href="javascript:foo(this)"> passes Window, I want the tag element itself

I expect this to print "a" because when I call foo(this), the argument seems to be the link tag.
<script type="text/javascript">
function foo (e) {
alert (e .tagName);
}
</script>
click
Instead, it prints "undefined". If I alert(e) it says "object Window". How do I make foo know which element launched it? Without passing/looking up ids.
You should not use href for JavaScript. Bad practice, instead use onclick and this will magically point to the link.
click
You also need to cancel the click action of the link. Either with return false or cancelling the event with preventDefault.
It is better to attach the event with Unobtrusive JavaScript
You can do this directly too
click​
The this object is not handled the same in all browsers. This is one of the many items that libraries like Prototype and jQuery try to normalize. That said, however, most browsers will pass the appropriate this during on onclick handle (rather than the href) as many other answers have pointed out. If you want to handle the this appropriately, you'll need to do things like those detailed in this question.
click
function foo(obj) {
alert(obj.tagName);
}​
Don't call the element e it's a standard for the event object.
JSfiddle DEMO

Categories

Resources