按钮onclick不会更改div的style.display
按钮onclick不会更改div的style.display
提问于 2016-06-16 17:03:09
我有两个div，分别称为loginpending和loggedin，我正在尝试配置它们，以便一旦单击一个按钮(button)，div就会在一个打开和一个关闭之间“闪烁”。
例如，在此当前状态下(loginpending的显示为block，loggedin的显示为none)，一旦点击该按钮，loginpending的显示将变为none，loggedin的显示将通过函数loginUpdate变为block，然后根据每个D15的状态而通过D14调用该函数。
但是，它不起作用--一旦按钮被点击，按钮的状态就完全不会改变。
帮助!
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代码(使用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
Stack Overflow用户
发布于 2016-06-16 17:11:07
现在，您的button是submitting from，它将页面refreshes设置为reloads的原始状态。
您需要将按钮的type设置为type="button"
<button id="button" type="button" onclick="launch()">Hello!</button>Stack Overflow用户
发布于 2016-06-16 17:11:14
$(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>
使用jQuery编写代码
Stack Overflow用户
发布于 2016-06-16 17:17:09
我尽可能多地使用你的原始代码。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37854568
复制相关文章
相似问题
腾讯云开发者
