Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Confirm box on clicking link with HTML class "external"

    Hey guys,

    This is my first time ever posting in a programming forum so please be nice! :)

    I'll admit right away that this is for a homework assignment, but I really did try to solve it myself before I decided to post here. The instructions are to have a confirm box pop up when links with the HTML class value "external" are clicked. If the user clicks "OK" they should be directed to the linked page. If they click "Cancel" they should not be directed anywhere.

    Here's my code:

    Code:
    function checkClass() {
    	var links = document.getElementsByTagName("a");
    	for ( var i = 0 ; i < links.length ; i++ ) {
    		var link = links[i];
    		if (link.className == "external") {
    			link.onclick = clickHandler();
    		}
    	}
    }
    
    window.onload = checkClass;
    
    function clickHandler() {
    	if (confirm("You clicked an external link. Do you really want to leave this site?")) {
    		return true;
    	}
    	return false;
    }
    The problem is that the confirm box is triggered on page load and not on link click. I know I wrote
    Code:
    window.onload = checkClass;
    but how else should I call the function? I thought
    Code:
    if (link.className == "external")
    would keep it from going as far as to the confirm box until an external link was clicked.

    Thanks for pointing me in the right direction,

    Johanna
    Last edited by zhouhana; 12-22-2011 at 08:40 AM.

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    it can be simplified more, but you can change that line to
    Code:
    link.onclick = clickHandler;
    to prevent the function from getting called immediately

  • Users who have thanked xelawho for this post:

    zhouhana (12-21-2011)

  • #3
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,472
    Thanks
    13
    Thanked 361 Times in 357 Posts
    the other point is, returning false doesn’t stop the link from redirecting. you explicitly need to stop that using Event.preventDefault().

    PHP Code:
    function stopAction(evt)
    {
        
    // for IE < 9
        
    evt evt || window.event;
        
    // prevent default action
        
    evt.preventDefault();
        
    // again for IE < 9
        
    evt.returnValue false;

    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • Users who have thanked Dormilich for this post:

    zhouhana (01-15-2012)

  • #4
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks, xelawho, that did the trick!

    Dormilich, is that an IE problem? In Firefox my code works as expected after xelawho's improvement.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •