Jump to content
Sign in to follow this  
brooke_theperson

Need help 'switching slides'

Recommended Posts

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>

Share this post


Link to post
Share on other sites

Every time you write

if (slide = 1){

You're making slide be 1

 

The = operator is for assignment, not comparison.

Share this post


Link to post
Share on other sites

You probably should read through the Javascript tutorial again, because this is something fundamental. Your question is answered in the tutorial.

Share this post


Link to post
Share on other sites

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 by brooke_theperson

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...