brooke_theperson Posted May 30, 2016 Share Posted May 30, 2016 Here is my code. I have two arrows and they go to the next 'slide' and previous 'slide'. For someone reason clicking the buttons doesn't 'switch slides'. Is there anything wrong? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <style> body{ background-color: black; } h3{ color: white; font-family: corsiva; text-align: center; } .maindiv{ height: 450px; width: 800px; border: 2px solid white; margin-left: auto; margin-right: auto; margin-top: 50px; } #leftarrow{ height: 40px; width: 100px; border: 2px solid black; margin-top: 140px; margin-left: 100px; color: black; text-align: center; font-size: 20px; background-color: black; } #rightarrow{ height: 40px; width: 100px; border: 2px solid white; margin-top: -140px; margin-left: 600px; color: white; text-align: center; font-size: 20px; background-color: black; position: absolute; } #image{ height: 250px; width: 300px; border: 2px solid white; margin-top: -150px; margin-left: 250px; } #explanation{ height: 100px; width: 80%; margin-left: auto; margin-right: auto; border: 2px solid white; margin-top: 20px; } </style> <script> $(document).ready(function(){ var slide = 0; $('#rightarrow').click(function(){ slide = slide + 1; if (slide = 1){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Nebula</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 2){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Gravity creates protostar</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 3){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Fusion begins to occur so a star forms</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 4){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Main sequence</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } }); $('#leftarrow').click(function(){ slide = slide - 1; if (slide = 0){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Animation</div>"); $('#leftarrow').css("color", "black").css("border", "2px solid black"); } if (slide = 1){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Nebula</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 2){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Gravity creates protostar</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 3){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Fusion begins to occur so a star forms</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } if (slide = 4){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Main sequence</div>"); $('#leftarrow').css("color", "white").css("border", "2px solid white"); } }); </script> <body> <h3><u>Life Cycles of Stars</u></h3> <div class = 'maindiv'> <button id = 'leftarrow'>Previous</button> <div id = 'image'></div> <button id = 'rightarrow'>Next</button> <div id = 'explanation'>Animation</div> </div> </body> </html> Link to comment Share on other sites More sharing options...
Ingolme Posted May 30, 2016 Share Posted May 30, 2016 Every time you write if (slide = 1){ You're making slide be 1 The = operator is for assignment, not comparison. Link to comment Share on other sites More sharing options...
brooke_theperson Posted May 30, 2016 Author Share Posted May 30, 2016 So how do I change that? Link to comment Share on other sites More sharing options...
Ingolme Posted May 30, 2016 Share Posted May 30, 2016 You probably should read through the Javascript tutorial again, because this is something fundamental. Your question is answered in the tutorial. Link to comment Share on other sites More sharing options...
brooke_theperson Posted May 30, 2016 Author Share Posted May 30, 2016 (edited) So I fixed this. I now see that it must be ==, but now I can click the button and it switches once and won't work after the second click? This is my new uncomplete script: <script> var slide = 0; $(document).ready(function(){ $('#rightarrow').click(function(){ slide = slide + 1 if (slide == 1){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div id = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Nebula</div>"); $('#leftarrow').css('border', '2px solid white').css('color', 'white'); } if (slide == 2){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div id = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>gravity forms protostar</div>"); $('#leftarrow').css('border', '2px solid white').css('color', 'white'); } if (slide == 3){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div id = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>fusion starts and a star forms</div>"); $('#leftarrow').css('border', '2px solid white').css('color', 'white'); } }); $('#leftarrow').click(function(){ slide = slide - 1 if (slide == 0){ $('.maindiv').empty(); $('.maindiv').append("<button id = 'leftarrow'>Previous</button><div id = 'image'></div><button id = 'rightarrow'>Next</button><div id = 'explanation'>Animation</div>"); $('#leftarrow').css('border', '2px solid black').css('color', 'black'); } }); }); </script> Edited May 30, 2016 by brooke_theperson Link to comment Share on other sites More sharing options...
Ingolme Posted May 30, 2016 Share Posted May 30, 2016 The event handlers get removed if you remove the element. You're deleting and re-creating your left and right buttons every time you click on them You probably should have those buttons in a part of the DOM that doesn't change. Link to comment Share on other sites More sharing options...
brooke_theperson Posted May 30, 2016 Author Share Posted May 30, 2016 Thanks so much! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now