Button onclick doesn't change style.display of div
Question
I have two div s, called loginpending and loggedin , which I am trying to configure so that once a button ( button ) is clicked, the div s will "flicker" between one being on and one being off.
For example, in this current state (with loginpending 's display as block and loggedin 's display as none ), once the button is clicked, loginpending 's display will become none and loggedin 's display will become block through the function loginUpdate , which is then called through launch depending on what the state of each div is.
However, it doesn't work - the state of the buttons don't change at all once the button is clicked.
Help!
HTML code:
<div id="loginpending" style="display:block;">
<a href="login.html">Signup</a>/<a href="login.html">Login</a> here!
</div>
<div id="loggedin" style="display:none;">
Hello!
</div>
<button id="button" onclick="launch()">Hello!</button>
Javascript code (with Jquery):
var logincheck = 0;
function loginUpdate() {
"use strict";
$("#loginpending").toggle();
$("#loggedin").toggle();
}
function launch() {
"use strict";
var loginpending = document.getElementById("loginpending").style.display;
var loggedin = document.getElementById("loggedin").style.display;
window.alert(loginpending);
window.alert(loggedin);
if (loginpending === "none") {
logincheck = 0;
loginUpdate();
} else if (loggedin === "none") {
logincheck = 1;
loginUpdate();
} else {
logincheck = 0;
$("#loggedin").toggle();
}
}
4 answers
solution1
0 2016-06-16 09:11:06
Right now your button is submitting the from which refreshes the page reloads in its original state.
You need to set the type of button to type="button"
<button id="button" type="button" onclick="launch()">Hello!</button>
solution2
0 2016-06-16 09:11:13
$(document).ready(function() { $('button').on('click', function(){ $('div').toggleClass('hidden'); }) });
.hidden { display: none; }
<!DOCTYPE html> <html> <head> </head> <body> <div id="loginpending" class=""> <a href="login.html">Signup</a>/<a href="login.html">Login</a> here! </div> <div id="loggedin" class="hidden"> Hello! </div> <button id="button" onclick="">Hello!</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script type="text/javascript" src="sample.js"></script> </body> </html>
Code with jQuery
solution3
0 2016-06-16 09:17:09
I tried to use your original code as much as I could.
var logincheck = 0; $("#button").click(function() { launch(); }); function loginUpdate() { "use strict"; $("#loginpending").toggle(); $("#loggedin").toggle(); } function launch() { "use strict"; var loginpending = $("#loginpending").is(":hidden"); var loggedin = $("#loggedin").is(":hidden"); if(loginpending) logincheck = 0; else if (loggedin) logincheck = 1 else logincheck = 0; loginUpdate(); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="loginpending" style="display:block;"> <a href="login.html">Signup</a>/<a href="login.html">Login</a> here! </div> <div id="loggedin" style="display:none;"> Hello! </div> <button id="button" type="button">Hello!</button>
solution4
0 2016-06-16 09:25:35
Gotta try this
$(function() { var logincheck = 0; function loginUpdate() { "use strict"; $("#loginpending").toggle(); $("#loggedin").toggle(); } $('#button').on('click', function(){ "use strict"; if(logincheck == 0) { logincheck = 1; }else{ logincheck = 0; } loginUpdate(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="loginpending" style="display:block;"> <a href="login.html">Signup</a>/<a href="login.html">Login</a> here! </div> <div id="loggedin" style="display:none;"> Hello! </div> <button id="button">Hello!</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.