CODEWITHSUNDEEP
javascripthtml
Kuba Bujak
Kuba Bujak

Reputation: 55

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

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: [email protected]">[email protected]</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>

Upvotes: 2

Views: 90

Answers (1)

Đinh Carabus
Đinh Carabus

Reputation: 3496

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.

Upvotes: 1

Related Questions