html - Javascript $('li').length call throws uncaught exception -
i've built little webpage carousel image slider. slider has buttons when clicked upon trigger image change , corresponding text appear below slider. right slider has 4 images. when click 'next image' button past fourth image, slideshow , corresponding text blurbs supposed start over, instead javascript or json throws error. same error thrown if click 'previous image' button when page first loads. leads me believe problem near increment decrement functions, of course wrong. error below , apologize in advance weird codeblock format. i'm not experienced js exceptions unsure best format posting them. threw of html, css , js in 1 codeblock because i'm unsure if it's html or js causing exception thrown. insights appreciated!
uncaught typeerror: cannot read property 'imagedes' of undefinedmoveright @ showcasewebsitetest.html:272(anonymous function) @ showcasewebsitetest.html:281m.event.dispatch @ jquery-latest.min.js:3m.event.add.r.handle @ jquery-latest.min.js:3 <html> <title>showcase website</title> <meta charset="utf-8"> <head> <style> header { width:100%; background-color:lightblue; text-align:center; padding:5px; } /*use of child selector combinator*/ header > h1 { color: black; } /*use of pseudo-class*/ p::first-letter { font-size: x-large; } /*use of navigation bar*/ nav { line-height:30px; background-color:#8f8f8f; height:1500px; width:100px; float:left; padding:5px; position: relative; } /*pseudo-class*/ a:visited { color: #00bda0; } /*using box model, border, outline, margin, padding, dimension, float*/ section { height:350px; width:100%; padding:10px 0 30px 2px; border: 3px solid gray; margin: 0px 1px 5px 25px; } /*using "display: none" property hide previous title*/ h1.hidden{ display: none; } /*using positioning*/ article.art1 { height:350px; width:350px; float:center; padding-top:100px; padding-left:50px; position: relative; top: 125px; left: 85px; } /*using positioning*/ aside { height:350px; width:350px; float:right; padding-top:10px; padding-right:150px; position: relative; top: 45px; left: 45px; right: 50px; } footer { background-color:lightblue; color:white; clear:both; text-align:center; padding:5px; } @import url(http://fonts.googleapis.com/css?family=open+sans:400,300,600); html { border-top: 5px solid #fff; background: #58ddaf; color: #2a2a2a; } html, body { margin: 0; padding: 0; font-family: 'open sans'; } h1 { color: #fff; text-align: center; font-weight: 300; } #slider { position: relative; overflow: hidden; margin: 20px auto 0 auto; border-radius: 4px; } #slider ul { position: relative; margin: 0; padding: 0; height: 200px; list-style: none; } #slider ul li { position: relative; display: block; float: left; margin: 0; padding: 0; width: 500px; height: 300px; background: #ccc; text-align: center; line-height: 300px; } button.control_prev, button.control_next { position: absolute; top: 40%; z-index: 999; display: block; padding: 2% 2%; width: auto; height: auto; background: #2a2a2a; color: #fff; text-decoration: none; font-weight: 600; font-size: 10px; opacity: 0.8; cursor: pointer; border:solid transparent; } button.control_prev:hover, button.control_next:hover { opacity: 1; -webkit-transition: 0.2s ease; } button.control_prev { border-radius: 0 2px 2px 0; } button.control_next { right: 0; border-radius: 2px 0 0 2px; } .slider_option { position: relative; margin: 10px auto; width: 160px; font-size: 18px; } .active{ color:red; } .imagedes{ color:red; } </style> </head> <body> <main> <header> <h1>text</h1> </header> <nav> <a href="">home</a> <br><a href="">how to</a> <br><a href="">additional</a> <br> </nav> <section class="section3"> <h1>text</h1> <p> text </p> <ul> <li>text</li> <li>text</li> <li>text</li> </ul> </section> <div id="slider"> <button class="control_next">></button> <button class="control_prev"><</button> <ul> <li class="active" data-des="image 1">slide 1</li> <li data-des="image 2" style="background: #aaa;">slide 2</li> <li data-des="image 3">slide 3</li> <li data-des="image 4" style="background: #aaa;">slide 4</li> </ul> </div> <div class="imagedes"></div> <footer> name here </footer> </main> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script> var datajson=[{"imagedes":"description image 1 can long might extend upto 2 lines in of cases , has rendered on image change"}, {"imagedes":"description image 2 can long might extend upto 2 lines in of cases , has rendered on image change"}, {"imagedes":"description image 3 can long might extend upto 2 lines in of cases , has rendered on image change"}, {"imagedes":"description image 4 can long might extend upto 2 lines in of cases , has rendered on image change"}] var index=0; $('.imagedes').text(datajson[0].imagedes); jquery(document).ready(function ($) { $('#checkbox').change(function(){ setinterval(function () { moveright(); }, 3000); }); var slidecount = $('#slider ul li').length; var slidewidth = $('#slider ul li').width(); var slideheight = $('#slider ul li').height(); var sliderulwidth = slidecount * slidewidth; $('#slider').css({ width: slidewidth, height: slideheight }); $('#slider ul').css({ width: sliderulwidth, marginleft: - slidewidth }); $('#slider ul li:last-child').prependto('#slider ul'); function moveleft() { $('#slider ul').animate({ left: + slidewidth }, 200, function () { $('#slider ul li:last-child').prependto('#slider ul'); $('#slider ul').css('left', ''); }); if(index<=0) index=$('li').length-1; else index-- $('.imagedes').text(datajson[index].imagedes); }; function moveright() { $('#slider ul').animate({ left: - slidewidth }, 200, function () { $('#slider ul li:first-child').appendto('#slider ul'); $('#slider ul').css('left', ''); }); if(index+1>=$('li').length) index=0; else index++ $('.imagedes').text(datajson[index].imagedes); }; $('button.control_prev').click(function () { moveleft(); }); $('button.control_next').click(function () { moveright(); }); }); </script> </body> </html>
change $('li').length in moveright() , moveleft() functions use slidecount variable.
right $('li').length returns total number of li elements on page (which greater number of carousel slides). results in index variable being set values out-of-bounds datajson array, , therefore causing datajson[index] return undefined.
Comments
Post a Comment