Why does this JavaScript if statement not work?

Question

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://code.jquery.com/jquery-2.1.4.js"></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://videopia.gigaboywebdesigns.com/" id = "currentLink">Home</a><br><br>
				<a href = "http://videopia.gigaboywebdesigns.com/account/">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://www.gigaboywebdesigns.com/">Gigaboy Web Designs</a>
		</footer>
	</body>
</HTML>

.value() is not jQuery method use .val() ; also add break; in last switch case — xkeshav
– xkeshav, Commented Feb 2, 2016 at 5:06
"All the code work until I get to the if statements" - and then what happens? Do you get an error in your browser's JS debug console? "I don't know if you need the CSS." - No. — nnnnnn
– nnnnnn, Commented Feb 2, 2016 at 5:13

stark · Accepted Answer · 2016-02-02 05:10:00Z

2

Change this section of your code and add a break to the last case. :

var selected = opts.options[opts.selectedIndex].val();

Instead of :

var selected = opts.options[opts.selectedIndex].value;

Snippet :

var selected = opts.options[opts.selectedIndex].val();
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();
                    break;

answered Feb 2, 2016 at 5:10

stark

2,2562 gold badges24 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nnnnnn Over a year ago

That won't work. You're now trying to call .val() on a non-jquery object. .value as a property (not a method) works there. The error in the OP's code is later where it tries to call .value() as a method.

Collectives™ on Stack Overflow

Why does this JavaScript if statement not work?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related