How would I hide the sign in button when signed in and hide the sign out button
ID: 3849531 • Letter: H
Question
How would I hide the sign in button when signed in and hide the sign out button when signed out in the follwoing code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="google-signin-client_id" content="361ghjdqd7kb74h1ave58tc494ote7bvaii.apps.googleusercontent.com">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>The Coyote Xchange</title>
<!-- Bootstrap core CSS -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="https://maxcdn.bootstrapcdn.com/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css">
<link href="css/jumbotron-narrow.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<script>
function onSignIn(googleUser) {
// Useful data for your client-side scripts:
var profile = googleUser.getBasicProfile();
console.log("ID: " + profile.getId()); // Don't send this directly to your server!
console.log('Full Name: ' + profile.getName());
console.log('Given Name: ' + profile.getGivenName());
console.log('Family Name: ' + profile.getFamilyName());
console.log("Image URL: " + profile.getImageUrl());
console.log("Email: " + profile.getEmail());
}
</script>
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation"><a href="about.html">About</a></li>
<li role="presentation"><a href="#">Upload</a></li>
<li role="presentation"><div class="g-signin2" data-onsuccess="onSignIn"></div></li>
<li role="presentation"><a href="#">Sign out</a>
<script>
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
</script></li>
</ul>
</nav>
<h3 class="text-muted white">The Coyote XChange</h3>
</div>
<div class="jumbotron">
<h1>Search for Books</h1>
<div class="container">
<div class="row">
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class=" search-query form-control" placeholder="Search" />
<span class="input-group-btn">
<button class="btn btn-danger" type="button">
<span class=" glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
<h3 class="lead">
Upload your unwanted textbooks. Find the books you need. All while staying on campus!
</h3>
</div>
<div class="jumbotron">
<h2>Suggested Places to Meet</h2>
<div class="row marketing">
<div class="col-lg-6">
<h3 class="lead">The Wild Song</h3>
<img class="img-responsive" src="ws.jpg">
<h3 class="lead">University Hall</h3>
<img class="img-responsive" src="uh2.jpg">
</div>
<div class="col-lg-6">
<h3 class="lead">John M. Pfau Library</h3>
<img class="img-responsive" src="lib1.jpg">
<h3 class="lead">Starbucks</h3>
<img class="img-responsive" src="star.jpg">
</div>
</div>
<h3 class="text-center">
Suggested time to meet: 9:00 AM - 7:00 PM
</h3><br/>
<h3 class="lead">
Campus Escort Service:
</h3>
<p>
(909) 537-5165
</p>
</div>
<footer class="footer">
<div class="row">
<p clas="text-left">© 2017 Fireball, Inc.</p>
<p class="text-right">Cal State University San Bernardino</p>
</div>
</footer>
</div>
</body>
</html>
Explanation / Answer
Add a tag like h1 with an id(<h1 id="display-message "></h1>)
Add an onclick event to the button(<button class="btn btn-danger" type="button">
<span class=" glyphicon glyphicon-search"></span>
</button>)
Javascript code between script tags:
<script>
var hidden = false;
function showMessage() {
document.getElementById("display-message").innerHTML="Welcome";
}
</script>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.