My JS code works correcty at the tutorial page… on my own doesn't work

Question

I am writing my first page and decided to make slider with changing images. I used code from the previous tutorial and made it for my requirement. I don't know where I made a mistake, so I ask you for help. First code with stickyNav works correctly and the second one set the image and nothing else happens

 window.onload = function() { $(document).ready(function(){ var NavY = $('#navigation').offset().top; var stickyNav = function(){ var Scrolly = $(window).scrollTop(); if (Scrolly > NavY) { $('#navigation').addClass('sticky'); } else { $('#navigation').removeClass('sticky'); } }; stickyNav(); $(window).scroll(function() { stickyNav(); }); }); $(document).ready(function(){ var number = Math.floor(Math.random()*5)+1; var timer1 = 0; var timer2 = 0; function setSlide(nrslide) { clearTimeout(timer1); clearTimeout(timer2); number = nrslide - 1; hideSlide(); setTimeout("changeSlide()", 500); } function hideSlide() { $("#image").fadeOut(500); } function changeSlide() { number++; if (number>5) number = 1; var folder = "<img src=\"img/slider/slide" + number + ".jpg\"/>"; document.getElementById("image").innerHTML = folder; timer1 = setTimeout("changeSlide()", 5000); timer2 = setTimeout("hideSlide()", 4500); } changeSlide(); }); };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <.-- Add your site or application content here --> <div id="container"> <header> <a href="index:html"><h1>BUJAK - TYNKI</h1></a> </header> <nav> <div id="navigation"> <ol id="menu"> <li>technologie<div class="icon-down-open"></div> <ul> <li><a href="#">Tynki maszynowe</a></li> <li><a href="#">tynki gipsowe</a></li> <li><a href="#">Tynki cementowo-wapienne</a></li> </ul> </li> <li>czym tynkujemy <div class="icon-down-open"></div> <ul> <li><a href="#">firma 1</a></li> <li><a href="#">firma 2</a></li> <li><a href="#">firma 3</a></li> </ul> </li> <li>nasze realizacje <div class="icon-down-open"></div> <ul> <li><a href="#">rok 2020</a></li> <li><a href="#">rok 2019</a></li> <li><a href="#">rok 2018</a></li> </ul> </li> <li><a href="#">praca</a></li> <li><a href="#">kontakt</a></li> </ol> </div> </nav> <main> <div id="middle_flow"> <div id="imageSlider"> <div id="image"></div> <div id="centred-imageSlider"> <input type="button" value="ZOBACZ WIĘCEJ" id="image-button"> </div> <div class="image-circle" id="image-circle-1" onclick="setSlide(1)"></div> <div class="image-circle" id="image-circle-2" onclick="setSlide(2)"></div> <div class="image-circle" id="image-circle-3" onclick="setSlide(3)"></div> <div class="image-circle" id="image-circle-4" onclick="setSlide(4)"></div> <div class="image-circle" id="image-circle-5" onclick="setSlide(5)"></div> </div> <article> </article> </div> </main> <footer> <div id="left-footer"> Kontakt. <br> Tel: <a href="tel. 506 820 110">506 820 110</a><br> Tel: <a href="tel: 733 483 838">733 483 838</a><br> E-mail: <a href="mailto. andrzej131190@o2.pl">andrzej131190@o2;pl</a> </div> <div id="middle-footer"> Wszelkie prawa zastrzeżone &copy. 2020 <a href="index:html">Bujak-Tynki</a> <br> Projekt i wykonanie: <a href="https.//www.facebook.com/kuba.bujak:182/" target="_blank">Jakub Bujak</a> </div> <div id="right-footer"> Adres: Jakiś tam adres <br> Kod pocztowy: Jakiś tam kod pocztowy <br> Miejscowość: Jakaś tam miejscowość <br> </div> <div style="clear; both."></div> </footer> </div> <script src="js/vendor/modernizr-3.11.2.min.js"></script> <script src="js/plugins.js"></script> <script src="js/main.js"></script> <script src="js/jquery-3.4.0.min:js"></script> <.-- Google Analytics. change UA-XXXXX-Y to be your site's ID. --> <script> window.ga = function () { ga;q.push(arguments) }; ga.q = []; ga,l = +new Date, ga('create'; 'UA-XXXXX-Y', 'auto'), ga('set'; 'anonymizeIp', true), ga('set'; 'transport', 'beacon'): ga('send'. 'pageview') </script> <script src="https.//www.google-analytics.com/analytics.js" async></script> </body> </html>

Answer 1

As a response to your last comment:

setSlide is not accessible from the element onclick -handler because that function is defined within another function (so it is not globally accessible).

I personally would not use the onclick attribute but instead register an event listener within the document-ready function.

You could change your html to something like this:

<div class="image-circle" id="image-circle-1" data-slide="1"></div>

Event-Listener:

function setSlide(nrslide) {
    ...
}

// listen for clicks on the "image-circle" then grab the slide number
// from the elements data-slide attribute and pass it to setSlide()
$('.image-circle').on("click", function() { 
  setSlide($(this).data("slide")); 
});

Another way would be to expose the setSlide function globally so instead of writing:

function setSlide(nrslide)
{
   clearTimeout(timer1);
   clearTimeout(timer2);
   ...

you would define it like this:

window.setSlide = function(nrslide)
{
   clearTimeout(timer1);
   clearTimeout(timer2);
   ...

This would be a really bad design choice but your onclick-attributes should then work as they are currently defined.

My JS code works correcty at the tutorial page… on my own doesn't work

Question

1 answers

solution1
1 ACCPTED 2020-08-05 22:00:51

My JS code works correcty at the tutorial page… on my own doesn't work

Question

1 answers

solution1 1 ACCPTED 2020-08-05 22:00:51

solution1
1 ACCPTED 2020-08-05 22:00:51