lundi 1 février 2016

Why does this JavaScript if statement not work?

I'm trying to change the value of <input type = "hidden" name = "hidden" id = "hidden" value = "0"> whenever you select one of the drop down options from the <select> tag. All the code work until I get to the if statements. Please help me and thank you. This is my code below. I don't know if you need the CSS.

$(document).ready(function(){
        
        /* Hide these items on load. */
        $("nav").hide();
        $("#hrNavLines2").hide();
        $("#usersBar").hide();
        $("#videosBar").hide();
        $("#albumsBar").hide();
        var video = document.getElementById("mainVideo");
        
        $("#hrNavLines1").click(function(){
                $("#hrNavLines1").hide();
                $("#hrNavLines2").show();
                $("nav").show();
        });
        
        $("#hrNavLines2").click(function(){
                $("#hrNavLines2").hide();
                $("#hrNavLines1").show();
                $("nav").hide();
        });
        
        var opts = document.getElementById("opts");
        opts.onchange = function() {
                var selected = opts.options[opts.selectedIndex].value;

                switch(selected) {
                        case "All":
                                $("#allBar").show();
                                $("#usersBar").hide();
                                $("#videosBar").hide();
                                $("#albumsBar").hide();
                                break;
                        case "Users":
                                $("#allBar").hide();
                                $("#usersBar").show();
                                $("#videosBar").hide();
                                $("#albumsBar").hide();
                                break;
                        case "Videos":
                                $("#allBar").hide();
                                $("#usersBar").hide();
                                $("#videosBar").show();
                                $("#albumsBar").hide();
                                break;
                        case "Albums":
                                $("#allBar").hide();
                                $("#usersBar").hide();
                                $("#videosBar").hide();
                                $("#albumsBar").show();
                }
                
                if (!$("#usersBar").is(":visible") && !$("#videosBar").is(":visible") && !$("#albumsBar").is(":visible")) {
                        $("#hidden").value(0);
                } else if (!$("#allBar").is(":visible") && !$("#videosBar").is(":visible") && !$("#albumsBar").is(":visible")) {
                        $("#hidden").value(1);
                } else if (!$("#allBar").is(":visible") && !$("#usersBar").is(":visible") && !$("#albumsBar").is(":visible")) {
                        $("#hidden").value(2);
                } else {
                        $("#hidden").value(3);
                }
                var hidden = document.getElementById("hidden");
                alert(hidden);
        }
        
});
header > #headerTop > #title {
        font-size: 33px;
        font-family: Arial;
        border: 2px solid black;
        border-radius: 30px;
        position: absolute;
        top: 10%;
        left: 6.5%;
        padding-left: 7px;
        padding-right: 7px;
        padding-top: 3px;
        padding-bottom: 3px;
}

header {
        background-color: white;
        position: absolute;
        top: 0%;
        left: 0%;
        padding: 7px;
        width: 98.9%;
        height: 7%;
        border-bottom: 1.5px solid black;
}

header a {
        padding-left: 10px;
        padding-right: 10px;
}

nav {
        position: absolute;
        top: 93%;
        left: 0%;
        background-color: white;
        border-radius: 5px;
        border-bottom: 1.5px solid black;
        border-right: 1.5px solid black;
}

a {
        color: blue;
        text-decoration: none;
}

#hrNavLines1, #hrNavLines2 {
        position: absolute;
        top: 5%;
        left: .5%;
        cursor: pointer;
        width: 25px;
}

#search {
        position: absolute;
        top: 20%;
        right: 1.75%;
}

.searchBar {
        text-align: center;
        width: 680px;
        height: 30px;
        padding: 3px 10px;
        margin: 0px 3px;
        font-size: 17px;
}

select {
        height: 30px;
        font-size: 17px;
        margin: 0px 3px;
}

#searchBttn {
        height: 38px;
        width: 80px;
        font-size: 17px;
        border-radius: 5px;
        margin-left: 3px;
}

body {
        background-color: #EEEEEE;
}
<?PHP
        require("searchResults.php");
?>

<!DOCTYPE HTML>
<HTML lang = "en">
        <head>
                <meta charset = "UTF-8">
                <meta name = "description" content = "Videopia is a video websites upload your videos to be cool.">
                <meta name = "author" content = "Adam Oates">
                <meta name = "title" content = "Home">
                <title title = "Home | Videopia">
                        Home | Videopia
                </title>
                <link rel = "stylesheet" type = "text/css" href = "main.css">
                <script type = "text/javascript" src = "http://ift.tt/1FikcPD"></script>
                <script type = "text/javascript" src = "main.js"></script>
        </head>
        <body>
                <header>
                        <div id = "hrNavLines1">
                                <hr class = "hrNav" noshade>
                                <hr class = "hrNav" noshade>
                                <hr class = "hrNav" noshade>
                        </div>
                        <div id = "hrNavLines2">
                                <hr class = "hrNav" noshade>
                                <hr class = "hrNav" noshade>
                                <hr class = "hrNav" noshade>
                        </div>
                        <nav>
                                <a href = "http://ift.tt/1WYZ9fj" id = "currentLink">Home</a><br><br>
                                <a href = "http://ift.tt/1JUyXjV">Create New User</a><br><br>
                        </nav>
                        <div id = "headerTop">
                                <span id = "title">
                                        Videopia
                                </span>
                                <span id = "search">
                                        <select id = "opts">
                                                <option id = "allOpt" value = "All">All</option>
                                                <option id = "usersOpt" value = "Users">Users</option>
                                                <option id = "videosOpt" value = "Videos">Videos</option>
                                                <option id = "albumsOpt" value = "Albums">Albums</option>
                                        </select>
                                        <input type = "hidden" value = "0" id = "hidden" name = "hidden">
                                        <input type = "text" placeholder = "Search Users, Videos, and Albums" class = "searchBar" name = "searchBar" id = "allBar">
                                        <input type = "text" placeholder = "Search Users" class = "searchBar" name = "usersBar" id = "usersBar">
                                        <input type = "text" placeholder = "Search Videos" class = "searchBar" name = "videosBar" id = "videosBar">
                                        <input type = "text" placeholder = "Search Albums" class = "searchBar" name = "albumsBar" id = "albumsBar">
                                        <input type = "button" value = "Search" id = "searchBttn" name = "searchBttn">
                                </span>
                        </div>
                </header>
                
                <section id = "mainIndex">
                        
                </section>
                
                <footer>
                        Copyright &copy; 2015 Videopia. All rights reserved.<br>
                        Developed by <a href = "http://ift.tt/1WYZ9fl">Gigaboy Web Designs</a>
                </footer>
        </body>
</HTML>

Aucun commentaire:

Enregistrer un commentaire