Javascript not opening class specific links with out HTML href

Question

I am currently running into a problem where I want to only get links with class = "okPop" to open, Then links are local html files called popupA.html and popupB.html. In order to stop the popup to default open the links using href I made the href undefined. Now there are links that do nothing. I want my JS code to trigger a popup window but nothing is happening.

HTML code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Popup Windows</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <!-- Script 9.4 - popups.html -->
    <!-- Bullet 8: Add class  -->
    <p><a href="javascript:undefined" class="okPop" id="B" target="PopUp">B Link</a> (Will open in a new window.)</p>
    <p><a href="javascript:undefined" class="1" id="A" target="PopUp">A Link</a> (Will open in a new window.)</p>
    <script src="js/popups.js"></script>
</body>
</html>

Javascript Code

    // Function called when the link is clicked.
function createPopup(e) {
    'use strict';

    // Get the event object:
    if (typeof e == 'undefined') var e = window.event;

    // Get the event target:
    var popupClass = e.class || e.srcElement;


    var link = "popup" + document.getElementByID(id) + ".html";

    // Create the window:
    var popup = window.open(link, 'PopUp', 'height=100,width=100,top=100,left=100,location=no,resizable=yes,scrollbars=yes');

    // Give the window focus if it's open:
    if ( (popup !== null) && !popup.closed) {
        popup.focus();
        return false; // Prevent the default behavior.
    } else { // Allow the default behavior.
        return true;
    }

} // End of createPopup() function.

// Establish functionality on window load:
window.onload = function() {
    'use strict';

    // Add the click handler to each link:
    for (var i = 0, count = document.links.length; i < count; i++) {
        // IF statement to trigger specific class value : Bullet 9
        if (document.links[i].className == "okPop"){

            if (document.getElementsByClassName('okPop').value){

                popupLinks[i].onclick = createPopup;

            }else{

                document.links[i].onclick = createPopup;
    } // End of for loop.




}; // End of onload function.

"" should be up in the . It might not work if it's referenced after the code that's using it. — jiy, Oct 22 '14 at 19:30
It's true that script placement can sometimes cause problems, but putting them at the end of the body is a common pattern used to decrease page load times. This is because the browser stops parsing HTML when it encounters a script tag, then does not resume parsing HTML until the script(s) are fully downloaded. Putting script tags at the bottom of the body tag can be especially beneficial if the page needs to download many scripts in order to function properly. — BrMcMullin, Oct 22 '14 at 19:46
Here's a good SO article on the issue of script placement, for your reading pleasure :) http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup — BrMcMullin, Oct 22 '14 at 19:55
As an aside, most browsers have web dev tools that include a JavaScript console that will usually automatically print out if syntax or reference errors occur, and will usually even point to a specific line number. Super handy :) — BrMcMullin, Oct 22 '14 at 19:59

BrMcMullin · Accepted Answer · 2014-10-22T19:49:56.037

To begin with, your script has a number of syntax errors; you're missing two closing braces in your window.onload function. It should look like this:

// Establish functionality on window load:
window.onload = function() {
    'use strict';

    // Add the click handler to each link:
    for (var i = 0, count = document.links.length; i < count; i++) {
        // IF statement to trigger specific class value : Bullet 9
        if (document.links[i].className == "okPop"){

            if (document.getElementsByClassName('okPop').value){

                popupLinks[i].onclick = createPopup;

            }else{

                document.links[i].onclick = createPopup;
            } // close the 'else' case
        } // close the 'if doc.links[i].classname' case
    } // End of for loop.   

}; // End of onload function.

Upon fixing that, you'll get a reference error from createPopup - id is undefined. Also, when constructing your link, you're asking for the entire element when you only want the element's ID:

    // Function called when the link is clicked.
function createPopup(e) {
    'use strict';

    // Get the event object:
    if (typeof e == 'undefined') {
        // I personally always use braces for clarity. Also, redefining
        // var e inside an if statement might not behave the way you expect.
        e = window.event;
    }

    // Get the event target:
    var popupClass = e.class || e.srcElement;
    // you get the event target but then you never reference it.    

    //we already have the element, now use its id to construct the link:
    var link = "popup" + popupClass.id + ".html";

    // Create the window:
    var popup = window.open(link, 'PopUp', 'height=100,width=100,top=100,left=100,location=no,resizable=yes,scrollbars=yes');

    // Give the window focus if it's open:
    if ( (popup !== null) && !popup.closed) {
        popup.focus();
        return false; // Prevent the default behavior.
    } else { // Allow the default behavior.
        return true;
    }

} // End of createPopup() function.

Try that - it's working on my end, but I only tested it on Chrome.

Thanks for the help! So its still not working but I think is because my string link is not returning popup + "A" or "B" + .html. — EsotericRider, Oct 22 '14 at 19:46
I am trying to figure a way to pass a A or B character from HTML to javascript to complete my string and pull up the right page. — EsotericRider, Oct 22 '14 at 19:49
You are the MAN! i was doubting that passing the id was possible because I kept calling it incorrectly. Thanks a ton it works perfectly. — EsotericRider, Oct 22 '14 at 20:03
Good! Feel free to mark my answer as Accepted then ( it's good for both of us on SO :) ) — BrMcMullin, Oct 22 '14 at 20:15

Javascript not opening class specific links with out HTML href

1 Answers1