JavaScript prevent default link behavior using only external javascript

Question

I have a javascript external file that has a link. Using only javascript, how do I cancel the link's default behavior? (i.e. return false). I need to do this without adding javascript code to the HTML or using any innerHTML. I need to do it inside a function that is in an external javascript file. Also, can't use jQuery or anything like jQuery. This is beginner stuff, so I can't use any complicated javascript. Just need to use best practices with the least amount of code. I will include my javascript and html below. My problems start at step 5 and up in the javascript code. Thanks, Jason

* HTML*

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Assignment 7</title>
<link href="css.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="js.js"></script>
</head>

<body>

<div id="content">
<h1>Do you have JavaScript enabled?</h1>
<p id="noJS">No! You do <strong>not</strong> have JavaScript enabled!</p>
<p id="extraCredit" ><a href="http://www.w3schools.com/tags/tag_a.asp">What does this link do?</a></p>
</div>

</body>
</html>

* JavaScript (So far) *

function hideMessage() {
    // Get elements that I will need
    var content = document.getElementById('content');
    var noJS = document.getElementById('noJS');
    var extraCredit = document.getElementById('extraCredit');
    var link = document.getElementsByClassName('a');

    // Step 1: Hide the “no JavaScript” message using pure JavaScript on page load. No CSS or class name switching allowed. (DONE)
    noJS.parentNode.removeChild(noJS);

    // Create new elements that I will need
    var newPara = document.createElement('p');
    var strong = document.createElement('strong');

    // Step 2: Show the new “yes JavaScript” message in a new paragraph on page load. (DONE)
    var beginNewParaText = document.createTextNode('Yes! You '); 
    var strongNewParaText = document.createTextNode('do ');
    var endNewParaText = document.createTextNode('have JavaScript enabled!');

    // add(append) new elements and text
    noJS.appendChild(newPara);
    content.insertBefore(newPara, extraCredit);
        // Step 3: Set the ID of the new message to “yesJS” so it turns green (as per the provided CSS). (DONE)
    newPara.setAttribute('id', 'yesJS');
    newPara.appendChild(beginNewParaText);
        // Step 4: In the new message, “do” appears <strong>. (DONE)
    newPara.appendChild(strong);
    strong.appendChild(strongNewParaText);
    newPara.appendChild(endNewParaText);

        // Step 5: Cancel the default behavior of the link. (NOT DONE)

        // Step 6: Display a message of your choice in a paragraph below the link when     the link is clicked. (NOT DONE)

// Step 9: Produce function modularity. You don’t have everything crammed into a single function. (NOT DONE)
// You can probably do everything you need in three functions. (NOT DONE)

// Step 10: Works in both Firefox and Internet Explorer. (NOT DONE)
}

score 0 · Accepted Answer · answered Oct 12 '12 at 04:29

0

You should get the link element like this:

var link = document.getElementsByTagName('a')[0];

Or it would be much cleaner to asign an id and use:

var link = document.getElementById('extraCreditBtn');

Then you can change the href attribute in Step 5:

link.href = "http://stackoverflow.com/questions/12850809/javascript-prevent-default-link-behavior-using-only-external-javascript";

Or you can do something like this to prevent the click action.

link.onclick = function () {
    alert("click on <a>");
    return false;
};

It depends on your needs (I think the second option will fit your requirements better).

answered Oct 12 '12 at 04:29

Pato

613
5
17

Thanks for your help Pato. But if I add the anon function that you suggest, it doesn't work the link still opens to the URL in the href in the HTML – HoppedUpDesigns Oct 12 '12 at 18:36
Is the alert being showed? If not, you are not getting the **link** object correctly. In the html, add an id="extraCreditBtn" to the **a**, and then, in the js, get it with *var link = document.getElementById('extraCreditBtn');*. – Pato Oct 12 '12 at 21:29
I've tested it in Firefox, Chrome, Chromium and even IE 9, and it works. – Pato Oct 12 '12 at 21:43
Be carefull to not call *hideMessage()* before the DOM is ready. This is not a trivial task as it sounds. You can use jquery to achieve this, or check this questions, wich discuss how to do it without jquery: [$(document).ready equivalent without jQuery](http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery) [Javascript - How to detect if document has loaded (IE 7/Firefox 3)](http://stackoverflow.com/questions/978740/javascript-how-to-detect-if-document-has-loaded-ie-7-firefox-3) – Pato Oct 13 '12 at 01:15
@HoppedUpDesigns : I am waiting for your response. – Pato Oct 18 '12 at 20:40
Sorry, Pato. Yes, I got it to work. Also, I have been banned from asking questions on stackflow. I know that it is my fault because I was not as familiar with the rules for asking questions. I should have asked questions that were more useful for more community members instead of just my specific problem. I also asked for more help than I should have for solutions to my assignments. Is there any way you can help me get unbanned? I promise that if given a 2nd chance, I won't do this anymore. – HoppedUpDesigns Oct 23 '12 at 20:13
I have no idea about that... I didn't even know that you could be banned... So, good luck! – Pato Oct 30 '12 at 13:23

JavaScript prevent default link behavior using only external javascript

1 Answers1