0
私は学校用の小さなウェブサイトで作業していましたが、私は 'login' divを薄い空気からポップアップさせるボタンを追加したい私はすでにHTML/CSSを書いていますが、Javascriptであまり経験がないので、ここで答えが得られることを期待しています。私はdivを開くopen（）関数を書いています。それが再びアクティブになると、それは終了するはずです。jQueryを使わずにhrefをクリックした後にJavascript関数でdivが表示されない
var open = false;
function open() {
\t open == false ? document.getElementById('login').style.display = 'block' : document.getElementById('login').style.display = 'none';
\t open = !open;
\t console.log(open);
}* {
\t margin: 0;
\t padding: 0;
\t min-width: 1px;
\t min-height: 1px;
\t }
html,body {
\t width: 100%;
\t height: 115%;
\t overflow-x: hidden;
\t background-image: url('../img/bg.jpg');
\t }
header {
\t margin-top: 2%;
\t background-color: #FF0000;
\t margin-left: 12.1%;
\t width: 75%;
\t height: 180px;
}
header p {
\t font-size: 64px;
\t margin-left: 40%;
\t padding-top: 4.5%;
}
#nav {
\t margin-left: 12.1%;
\t width: 75%;
\t height: 50px;
\t background-color: #FF0000;
\t border-bottom: 1px solid #FFFFFF;
}
#nav ul li a {
\t display: inline-block;
\t text-align: center;
\t padding: 11px 14px;
\t text-decoration: none;
\t font-size: 24px;
\t }
\t
#content {
\t margin-left: 12.1%;
\t width: 75%;
\t height: 73.9%;
\t background-color: #FF0000;
}
footer {
\t text-align: center;
\t background-color: #FF9900;
\t width: 75%;
\t margin-left: 12.1%;
}
#nav #right {
\t float: right;
}
#nav ul {
\t list-style-type: none;
\t margin: 0;
\t padding: 0;
\t width: 100%;
\t border-top: 1px solid #FFFFFF;
\t
}
#nav ul li {
\t float: left;
}
#nav ul a:hover {
\t transition: 0.5s;
\t background-color: #FFFF0F;
}
#login {
\t display: none;
\t float: right;
\t margin-top: 2%;
\t margin-right: 5%;
\t width: 25%;
\t height: 20%;
\t background-color: #FFFFFF;
}
#login form {
\t margin-left: 15%;
\t margin-top: 8%;
}<!DOCTYPE html>
<html>
\t <head>
\t \t <title>Website</title>
\t \t <link rel="stylesheet" type="text/css" href="css/style.css"/>
\t \t <script src="js/LoginMenu.js"></script>
\t </head>
\t <body>
\t <header><p> Lost Story </p></header>
\t <div id="nav">
\t \t <ul>
\t \t \t <li><a href="#">Home</a></li>
\t \t \t <li><a href="#">Register</a></li>
\t \t \t <li><a href="#">Downloads</a></li>
\t \t \t <li><a href="#">Forums</a></li>
\t \t \t <li><a href="#">Donate</a></li>
\t \t \t <li><a href="#">Vote</a></li>
\t \t \t \t <div id="right">
\t \t \t \t \t <li><a href="#" onclick="open()">Log in/register</a></li>
\t \t \t \t </div>
\t \t </ul>
\t </div>
\t <div id="content">
\t \t <div id="login">
\t \t \t <form>
\t \t \t \t <p> username: </p>
\t \t \t \t <input type="text" name="firstname">
\t \t \t \t <p> password </p>
\t \t \t \t <input type="password" name="pass">
\t \t \t </form>
\t \t </div>
\t
\t
\t </div>
\t <footer> Website made by a rock </footer>
\t </body>
</html>私はまだ答えを探しています、最後の時間は、誰も私は、この時間は、それがうまくいただければ幸いジャバスクリプトについての私の質問に答えることを試みません。
ありがとうございます！
「オープン」を取得している時点では、関数です。実際には、変数と関数の両方の名前を変更する必要があります。これは、ネイティブのグローバルな 'open'メソッドをシャドーイングしているからです。 – Teemu
これは 'open == false？ document.getElementById（ 'login'）。style.display = 'ブロック'：document.getElementById（ 'login'）。style.display = 'なし'; '悪いです！ if/elseとして使用しないでください。あなたがそれを使うつもりなら、それを正しい方法で行います。 'document.getElementById（ 'login'）。style.display = open == false？ 'block'： 'none'; ' – epascarello
@ Teemuこれをしても同じ結果になります。 –