Q&A
パスワードを入れるとボタンが表示されるようにしたいのですが、最初から表示されている状態になります。最初は非表示したいのですが・・・間違えているところが分かりましたら教えて欲しいと思います。
<html> <body> <head> <meta charset="UTF-8"> </head> <script type="text/javascript"> document.getElementById("disp").style.display ="none"; function handan(shadanki){ if(shadanki=='123'){ document.getElementById("disp").style.display="block"; document.getElementById("pass-content").style.display="none"; } else { document.getElementById("kekka").innerHTML="パスワードが違います。"; } } </script> <style type="text/css"> p { display: inline-block; } .cp_button03 { position: relative; z-index: 1; display: inline-block; box-sizing: border-box; width: 160px; padding: 1em; line-height: 1.4; cursor: pointer; user-select: none; transition: color 0.4s, transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); color: #52c11f; border: 1px solid #52c11f; border-radius: 0; background: transparent; } .cp_button03:hover { color: #ffffff; border: 1px solid #52c11f; } .cp_button03:before, .cp_button03:after { position: absolute; z-index: -1; top: 0; left: 0; display: block; width: 100%; height: 100%; content: ''; } .cp_button03:before { transition: transform cubic-bezier(1, 0, 0, 1) 0.4s; -webkit-transform: scaleY(0); transform: scaleY(0); transform-origin: top center; background-color: #52c11f; } .cp_button03:after { top: -6px; left: -6px; transition: transform cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s; border: 1px solid #52c11f; } .cp_button03:hover:before { -webkit-transform: scaleY(1); transform: scaleY(1); border: 1px solid #52c11f; } .cp_button03:hover:after { -webkit-transform: translate(6px, 6px); transform: translate(6px, 6px); border: 1px solid #52c11f; } .cp_button03:active { transition-duration: 0.05s; -webkit-transform: translate(6px, 6px); transform: translate(6px, 6px); } .cp_button03:active:after { transition-duration: 0.05s; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .cp_button03:focus { color: #52c11f; border: 1px solid #52c11f; } .cp_button03:focus:hover { color: #ffffff; } .cp_button03:focus:before { background-color: #52c11f; } </style> <div id="pass-content"> <input type="password" id="num"> <input type="button" value="実行" onclick="handan(num.value)"> <div id="kekka">ここに結果を表示します</div> <img src="https://up.gc-img.net/post_img_web/2015/08/suPLuJhlsmp8398" width="160px" height="106px"> </div> <div id="disp"> <p><a class="cp_button03" data-target="modal-05"><font size="2">あ</font></a></p> <p><a class="cp_button03" data-target="modal-05"><font size="2">い</font></a></p> <p><a class="cp_button03" data-target="modal-05"><font size="2">う</font></a></p> </div> </body> </html>
回答2件
0
ベストアンサー
タグの配置がめちゃくちゃになっています。
html
1<html> 2 <head> 3 <meta charset="UTF-8"> 4 <style>...</style> 5 <script>...</script> 6 </head> 7 <body> 8
のような順にしてみてください。
投稿2020/12/25 22:32
総合スコア1907
0
<script>をbodyタグの直前においてみてください。
投稿2020/12/25 17:29
総合スコア30
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。