Asked  7 Months ago    Answers:  5   Viewed   79 times

I want to run a simple JavaScript function on a click without any redirection.

Is there any difference or benefit between putting the JavaScript call in the href attribute (like this:

<a href="javascript:my_function();window.print();">....</a>

) vs. putting it in the onclick attribute (binding it to the onclick event)?

 Answers

14

Putting the onclick within the href would offend those who believe strongly in separation of content from behavior/action. The argument is that your html content should remain focused solely on content, not on presentation or behavior.

The typical path these days is to use a javascript library (eg. jquery) and create an event handler using that library. It would look something like:

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );
Tuesday, June 1, 2021
 
SJain
answered 7 Months ago
13

It does not cause problems but it's a trick to do the same as PreventDefault

when you're way down in the page and an anchor as:

<a href="#" onclick="fn()">click here</a>

you will jump to the top and the URL will have the anchor # as well, to avoid this we simply return false; or use javascript:void(0);

regarding your examples

<a onclick="fn()">Does not appear as a link, because there's no href</a>

just do a {text-decoration:underline;} and you will have "link a-like"

<a href="javascript:void(0)" onclick="fn()">fn is called</a>
<a href="javascript:" onclick="fn()">fn is called too!</a>

it's ok, but in your function at the end, just return false; to prevent the default behavior, you don't need to do anything more.

Friday, July 9, 2021
 
Akdeniz
answered 5 Months ago
17

2016 update

It's been over 4 years since this question was posted and things progressed quite a bit.

You can't use:

var els = document.getElementsByTagName("a[href='http://domain.com']");

but what you can use is:

var els = document.querySelectorAll("a[href='http://domain.com']");

(Note: see below for browser support)

which would make the code from your question work exactly as you expect:

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

You can even use selectors like a[href^='http://domain.com'] if you want all links that start with 'http://domain.com':

var els = document.querySelectorAll("a[href^='http://domain.com']");

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link/gi, 'dead link');
}

See: DEMO

Browser support

The browser support according to Can I use as of June 2016 looks pretty good:

caniuse.com/queryselector (See: http://caniuse.com/queryselector for up to date info)

There is no support in IE6 and IE7 but IE6 is already dead and IE7 soon will be with its 0.68% market share.

IE8 is over 7 years old and it partially supports querySelectorAll - by "partially" I mean that you can use CSS 2.1 selectors like [attr], [attr="val"], [attr~="val"], [attr|="bar"] and a small subset of CSS 3 selectors which luckily include: [attr^=val], [attr$=val], and [attr*=val] so it seems that IE8 is fine with my examples above.

IE9, IE10 and IE11 all support querySelectorAll with no problems, as do Chrome, Firefox, Safari, Opera and all other major browser - both desktop and mobile.

In other words, it seems that we can safely start to use querySelectorAll in production.

More info

For more info, see:

  • https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
  • https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
  • http://caniuse.com/queryselector

See also this answer for the difference between querySelectorAll, querySelector, queryAll and query and when they were removed from the DOM specification.

Wednesday, July 28, 2021
 
leebriggs
answered 5 Months ago
81

Keep in mind that in JavaScript a function is an object, passed around like any other variable. So this is a reference to the function:

los

This, on the other hand, executes the function and evaluates to its result:

los()

So when you do this:

setInterval(los(), 1000)

You're not setting the interval to the function, but to the result of the function. So, for example, if the function returns true then you're essentially writing this:

setInterval(true, 1000)

The function executed once, then the interval is repeated for its result. What you want is to use the function reference itself in the interval:

setInterval(los, 1000)

That way setInterval will execute the function each interval, instead of executing its result (which doesn't do anything).

Saturday, August 7, 2021
 
Eddas
answered 4 Months ago
20

EDIT Due to what @Dellirium pointed out in the comment, I've revised my answer to reflect the true issue here. The solution would still work, however.

The problem is that JSFiddle makes the JavaScript run on document load by default. This means that the JS is loaded after the HTML, and therefore it wouldn't have been defined at the time the onclick event was initialized in the HTML.

It seems to be a problem with closures. If you have "Load Type" set to "onload" in JSFiddle, this is what it does internally (you can check the developer console):

<script type="text/javascript">
    //<![CDATA[
        window.onload=function(){
            function call286Dart123(a,b) {
                console.log(a + "t" + b);
            }
        }
    //]]> 
</script>

This means that it is wrapped in in an anonymous event handler to the onload event. And since variable (and function) scopes are bound by functions in JavaScript, this makes them not available to the global scope

Solution: To fix this, under the "JavaScript" menu, change "Load Type" to "No wrap - in &t;head>". It's that easy =).

See this JSFiddle fork as a working example.

In other words, this would simply change it to (again, you can verify this by visiting the developer console on my JSFiddle):

<script type="text/javascript">
    //<![CDATA[
        function call286Dart123(a,b) {
            console.log(a + "t" + b);
        }
    //]]> 
</script>

In which, cal286Darkt123 would be defined in the global scope (outside any other functions).

For more info on closures, check the MDN Docs.

Wednesday, August 18, 2021
 
user9751447
answered 4 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share