How do I move this JavaScript event from an inline event to its own .JS file?

Question

Happened across a snip of JS that I've managed to make work for my uses, but as I'm brand new to javascript, I'm unsure whether I've understood how & why it works. As it stands, it's inline (inside an html tag, but I'd like to see it either in its own .js file so it can be used by several thousand links on one of several hundred pages on the site I'm putting together.

The purpose of the javascript I was looking for was to kill or disable a link (and only that link) on a page after it had been clicked once. I didn't want it to disappear, as I'd seen mention of, just be made un-clickable.

Anyway, this is what I found. Assistance is appreciated.

<A HREF="testvid.AVI" onclick="this.onclick=function(){return false;}"><DIV ID="BOX1">This is a video file</DIV></A>

Again, the question is, how to take that onclick event & place it in its own .js file. Thank you.

fantactuka · Accepted Answer · 2010-07-26 10:07:16Z

1

With plain js you can use the same code:

document.getElementById('videoLink').onclick = function() { this.onclick = function() { return false; } }

With jQuery you can try:

$("#videoLink").one('click', function() {
   $(this).click(function() {
        return false;
   });
});

UPD:

<A HREF="testvid.AVI" id="videoLink"><DIV ID="BOX1">This is a video file</DIV></A>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript" src="filename.js"></script>

filename.js

$(function() {
    $("#videoLink").one('click', function() {
       $(this).click(function() {
            return false;
       });
    });
});

edited Jul 26, 2010 at 10:07

answered Jul 26, 2010 at 9:20

fantactuka

3,33421 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

TheLandYacht Over a year ago

I assume you mean putting the above in a blank file & name it filename.js. It'll reside in the same folder. How do I change the above <a href> to reference it?

TheLandYacht Over a year ago

OK, did the following. saved your original "plain js" code to filename.js. Added the line <script type="text/javascript" src="filename.js"></script> to the <head>. Changed my original <a href> link to match yours. That broke the function of the original script

TheLandYacht Over a year ago

added the info below the entry "filename.js" in your UPD to the filename.js file. This also had no effect.

fantactuka Over a year ago

Have you added jquery script reference?

TheLandYacht Over a year ago

yep, both <script type=> lines are in the <head> section. the <a href> line matches yours above. And just for safety's sake, I put both the "document.getElementByID" line and the jQuery script in the filename.js file.

|

Collectives™ on Stack Overflow

How do I move this JavaScript event from an inline event to its own .JS file?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related