mccoy81 Posted June 27, 2013 Share Posted June 27, 2013 I have read through the book and am attempting to use some of the information for a site I am working on. Sticking with progressive enhancement I have kept the urls in the href attribute and added ids to each of my links. My problem is that when I click the link it is following that link instead of the javascript. Here is my code if you could please help me figure out what the problem is. var connectLink = U.$('connectLink'); var reviewsLink = U.$('reviewsLink'); var attractionsLink = U.$('attractionsLink'); var aboutLink = U.$('aboutLink'); var toptenLink = U.$('toptenLink'); var content = U.$('content'); var ad = U.$('ad'); var connect = U.$('connect'); var reviews = U.$('reviews'); var attractions = U.$('attractions'); var about = U.$('about'); var topten = U.$('topten'); function openConnect() { 'use strict'; // Get the event object: if (typeof e == 'undefined') e = window.event; U.$('close').onclick = closeContent; // Close the other links if they are currently open if (reviews.style.visibility == "visible") { reviews.style.visiblity = 'hidden'; }else if (attractions.style.visibility == "visible") { attractions.style.visiblity = 'hidden'; }else if (about.style.visibility == "visible") { about.style.visiblity = 'hidden'; }else if (topten.style.visibility == "visible") { topten.style.visiblity = 'hidden'; } // Open the connect div content.style.visibility = 'visible'; connect.style.visiblity = 'visible'; ad.style.display = 'block'; connectLink.onclick = null; // Prevent the form's submission: if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } return false; } // End of openConnect() function window.onload = function() { 'use strict'; U.addEvent(connectLink), 'click', openConnect); }; Link to comment Share on other sites More sharing options...
HartleySan Posted June 28, 2013 Share Posted June 28, 2013 It looks like you have a syntax error with the following line: U.addEvent(connectLink), 'click', openConnect); Get rid of the right parenthesis after connectLink, and hopefully it'll work. I recommend using the console in Chrome, or Firebug in Firefox to debug these sorts of problems. You can quickly pull up the console in Chrome by pressing Ctrl + Alt + J. Please let us know if that solves the problem. Link to comment Share on other sites More sharing options...
mccoy81 Posted June 28, 2013 Author Share Posted June 28, 2013 I made the changes but the link is still followed. I have firebug but it will not give me information on this error as when I click the link to see what if there is an error it goes to the new page and firebug clears the content because a new page as been loaded. Link to comment Share on other sites More sharing options...
Larry Posted June 28, 2013 Share Posted June 28, 2013 I don't see an obvious JavaScript error, but I know what you mean about how the browser gets to the next page before you see the error (because the JavaScript that interrupts that process is not executed due to its error). One simple way of preventing that here is to remove the HREF value on the connectLink so that the browser won't go anywhere. Link to comment Share on other sites More sharing options...
mccoy81 Posted June 28, 2013 Author Share Posted June 28, 2013 I tried removing the href for testing purposes and firebug is giving me an error saying that "e is undefined" which doesnt make sense to me as I thought thats what was happening with this line if (typeof e == 'undefined') e = window.event; Link to comment Share on other sites More sharing options...
HartleySan Posted June 28, 2013 Share Posted June 28, 2013 If you're getting an error saying that e is undefined, then you can at least rest assured that your links aren't being followed now, right? Also, e is undefined because you didn't add an e parameter to your openConnect function header. Please edit the function header as follows: function openConnect(e) { In other words, add the e. Link to comment Share on other sites More sharing options...
mccoy81 Posted June 28, 2013 Author Share Posted June 28, 2013 I figured out what the problem was for some reason I had ad.style.display set up as class in the html so I changed that to an id and it works now. Link to comment Share on other sites More sharing options...
Larry Posted June 28, 2013 Share Posted June 28, 2013 Makes sense. Kudos for figuring it out and thanks for sharing! Link to comment Share on other sites More sharing options...
Recommended Posts