按钮onclick不会更改style.div的显示
[英]Button onclick doesn't change style.display of div
问题描述
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. 
我有两个div S，叫loginpending和loggedin ，而我试图来配置，这样一旦一个按钮（ button ）被点击， div的意志“忽悠”一个是上一个被关闭之间。
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. 例如，在当前的状态（与loginpending的显示为block和loggedin的显示为none ），一旦按钮被点击， loginpending的显示将变得none和loggedin的显示将成为block通过函数loginUpdate ，然后根据每个div的状态通过launch调用。
However, it doesn't work - the state of the buttons don't change at all once the button is clicked. 但是，它不起作用-单击按钮后，按钮的状态根本不会改变。
Help! 救命！
HTML code: HTML代码：
<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): Javascript代码（使用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 个解决方案
解决方案1
0 2016-06-16 09:11:06
Right now your button is submitting the from which refreshes the page reloads in its original state. 现在，您的button正在submitting ， from refreshes页面以其原始状态reloads 。
You need to set the type of button to type="button" 您需要将按钮的type设置为type="button"
<button id="button" type="button" onclick="launch()">Hello!</button>
解决方案2
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 jQuery代码
解决方案3
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>
解决方案4
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.