jQuery and Js functions syntax mixing

Question

I have small problem with the following. This is ofc just a snippet of the whole code and it is usually run through a setInterval(time,function); command but I'd like to replace the auto-sliding pictures by having instead a "next" button, why can't I just use jQuery and stick it into a

$("#nextBtn").click(nextSlide);

command ? I get my button appearing but no event. Could it be that I'm putting the jQuery command in a JS

function onLoadWindow(e) {}

instead of jQuery's

$(document).ready(function() {})

I just finished learning the basics of JS recently and started jQ shortly after, so I'm still a beginner in both but with some prior programming experience with Java. I'm kinda new to mixing syntax's together. Thanks a bunch for the help! =)

EDIT : replaced code snippet with full code. I tried skimming it by taking out what wasn't needed like a couple tags and relevant styling. But now it seems I can't even get the div button to send text to console so Im pretty sure there's an obvious "noob" error somewhere, sorry for "wasting" people's time ..

<!DOCTYPE html>
  <html>
           <head>
        <meta charset="UTF-8">
        <title>JS Slideshow</title>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

        <style type="text/css">

            .slide {
                height:200px;
                width:320px;
                position:absolute;
                opacity:0;
            }

            img {
                width:100%;
                height:100%;
            }   

            #slideshow {
                position:relative;
            }

            .active {
                opacity:1;
                transition:opacity 1s;
            }

            #nextBtn {
                display:block;
                float:left;
                height:25px;
                width:40px;
                background-color:black;
                margin-top:210px;
            }

        </style>

        <script type="text/javascript">

            window.addEventListener("load",onLoadWindow);

            var active_slide;
            var slides;

            function onLoadWindow(e) {
                var slideShow=document.getElementById("slideshow");
                slides=slideShow.getElementsByTagName("div");
                active_slide=0;

                slides[0].classList.add("active");

                //setInterval(nextSlide,10000);
                $("nextBtn").click(nextSlide);

            }

            function nextSlide () {
                slides[active_slide].classList.remove("active");
                active_slide++;

                active_slide%=3;  

                slides[active_slide].classList.add("active");
            }


        </script>

    </head>

    <body>
        <div id="slideshow">

            <div class="slide">
                <img src="IMG/bridge.jpg" alt="" title="" />
            </div>

            <div class="slide">
                <img src="IMG/leaf.jpg" alt="" title="" />
            </div>

            <div class="slide">
                <img src="IMG/road.jpg" alt="" title="" />
            </div>
</div>
    <div id="nextBtn"></div>

    </body>

</html>

Does the nextSlide function work when you call it manually from the console? — metadept
– metadept, Commented Mar 31, 2013 at 18:53
You need to show the overall structure of your code: where is that "click" handler setup code? Where is the "nextSlide" function declared? — Pointy
– Pointy, Commented Mar 31, 2013 at 19:01
Also it's all the same syntax - jQuery is just a JavaScript library that adds functionality without extending syntax at all. — Pointy
– Pointy, Commented Mar 31, 2013 at 19:08
youre missing the hash bang in the selector. ` $("nextBtn").click(nextSlide)` is suppose to be ` $("#nextBtn").click(nextSlide)` right? — VeXii
– VeXii, Commented Mar 31, 2013 at 19:39

Kizer Yakuza · Accepted Answer · 2013-03-31 19:57:10Z

2

it was indeed just a missing hash symbol to correctly refer to the Id .. thanks to all and of course VeXii for pointing it out x)

answered Mar 31, 2013 at 19:57

Kizer Yakuza

7772 gold badges8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery and Js functions syntax mixing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related