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.
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.