CODEWITHSUNDEEP
javascript
cdugga
cdugga

Reputation: 3859

Calling js function in external js file

I'm trying to call a simple function with alert but it wont work when i try call the function (contained in an external js file) from my html page.

I have a import and the call is very simple. Any suggestions?

    <head>
<script src="/js/jsFunctions.js" type="text/javascript"></script>

In my code I call

<a href="javascript:displayAlertText('someText');">

Inside the js I have some jquery followed by a function

function displayAlertText(someText)
    {
        alert('alert' + someText);
    }

Upvotes: 2

Views: 5364

Answers (4)

Andrzej Doyle
Andrzej Doyle

Reputation: 103797

What you are doing looks like it should work. The problem is likely elsewhere.

Hrefs with "Javascript:" prefixes are really rather horrible. Instead, try rewriting that as:

<a href="#" onclick="displayAlertText('someText'); return false;">

Beyond that (which I don't think would actually be causing it), you've committed the cardinal sin of saying "It didn't work". Did you get any Javascript errors in the console? I suspect you would have, unless a valid function really was called.

Also, try calling the JS function explicitly from within a <script> block on your page, to see at what point it's failing.

Double-check as well that the external file really has been loaded at the time you click on the link - perhaps put a line at the bottom of the external script file to help check this, such as 

alert('External file loaded.');

EDIT (based on comment): OK, so we've established you can call the method from "normal" JavaScript on your page. This means that the problem lies with the way that you're trying to call the script from your hyperlink.

Have you passed your HTML through a validator? If the syntax is invalid, then user agents can interpret it however they want, including ignoring it completely.

If the HTML does validate then at this point it might be useful to post a link to your full HTML, so that others can look over it and see where the problem lies. It's possibly something like another function overriding the onclick event for the link, and so your event handler gets lost.

Upvotes: 5

powtac
powtac

Reputation: 41050

In pure jQuery you would do this like:

$(document).ready(function(){

    $('a').click(function(){
        alert('here');
    })

})

Upvotes: 3

BalusC
BalusC

Reputation: 1108722

You mentioned jQuery. Is the function standalone or inside a jQuery object (i.e. wrapped inside another function)? This makes difference.

Apart from this problem, the way you invoke the function isn't clean. Move it to the onclick attribute or better make use of jQuery.

Upvotes: 0

Rik Heywood
Rik Heywood

Reputation: 13972

try this instead...

<a href="#" onclick="displayAlertText('someText');">

If that does not help, I would start making sure that your javascript file is loading correctly and doesn't contains some simple syntax error somewhere. View your page with Firebug on in Firefox and look for warnings and errors.

Upvotes: 0

Related Questions