0

www.broadwayinvictoria.com functions fine with the existing jquery and javascript (please visit site to check out Source Code). However, am encountering a javascript conflict locally when I add a slider to the Home Page. The 'slider.js' file functions properly on its own locally as does the Home Page jquery and javascript without the slider.

What have I tried?

  1. Researched various forums, YouTube and documentation on the jQuery site.
  2. Am aware of the '$' conflict, and have learned about and tried jQuery.noconflict without success.
  3. Reordered where jquery and .js files are located (all in the Head, all just before closing </body> tag) and the sequence in which they are laid out, one-over-the-other.
  4. 'slider.js' Prior to creating the external 'slider.js' file, I had this script added and placed just before the closing </body> tag of the index file.
  5. Viewing the 'slider.js' file in Google Developer Tools / Sources There is an error on the second last line of code:

That code is on the next line:

 slides[slideIndex-1].style.display = "block";

This is what the accompanying error message says: "Uncaught TypError: Cannot read property 'style' of undefined"

-----For Reference 'slider.js' follows between the dotted lines -------

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slideshow-container");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
 }

----------- END of 'js.file' -------------------------

Appreciate your insight and guidance. Let me know if I need to clarify anything.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
D Convention
  • 1
  • 1
  • when is `showSlides` called? is this in a dom ready state? – Daniel A. White Oct 25 '16 at 23:38
  • This should not have been closed, he already said he has put the script tags at the end. – dave Oct 25 '16 at 23:40
  • The problem is most likely that `slideIndex` is in the global scope, and he should wrap slider.js in an IIFE. – dave Oct 25 '16 at 23:41
  • @dave. Thanks for your attentiveness. To clarify, one trouble-shooting option I tried was to place all the jquery and js files immediately before the closing

    tag as you had alluded to - listed above in Item 3 . Can you please explain how to wrap slider.js in an IIFE? All this new to me.

     – D Convention Oct 27 '16 at 15:59
  • Just wrap it in `(function() { /* your code here */ })();` – dave Oct 27 '16 at 16:02
  • Also, you could probably wrap `slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active";` in `if (slides.length <= slideIndex) { /* code here */ }` – dave Oct 27 '16 at 16:05
  • @dave DAVE...DAVE....DAVE! It worked!!! Thanks so much for your help. Your accurate eye and prompt response saved my carcass. In the end the client wants something else. Sheesh! You have no idea how long I struggled with this problem. Quickly scoped your bio. Seem like a great guy. – D Convention Oct 28 '16 at 15:04
  • I know this comment section isn't for this purpose, but I'm compelled to do it. Cats like you make a big difference in the world. Bro fist bump. DAVE...DAVE...DAVE!!! – D Convention Oct 28 '16 at 15:06

0 Answers0