Jump to content

Need help 'switching slides'

brooke_theperson

By brooke_theperson
in HTML/XHTML

 Share

Recommended Posts

brooke_theperson Newbie

brooke_theperson

Posted
Posted

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

brooke_theperson

Posted
  • Author
Posted (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 by brooke_theperson
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...