0
「ope」、「na」、「input」のいずれかを含む「div」を非表示にする必要があります。 最初に表示されている必要があります（表示されていなければなりません）。これはこのようにしましたが、 は機能しません。何か間違っていますか？------------------ -------------------- ..........1つのボタンの中に2つのonclickが機能しない、
<!DOCTYPE html>
<html lang="en">
<head>
<title>Log In</title>
<meta charset="utf-8">
<!-- < meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="">
<script src="login.js"></script>
<style>
* {
box-sizing: border-box;
-webkit-box-sizing
-moz-box-sizing: border-box;
}
body{
margin:50px 0;
padding:0px;
text-align:center;
\t
\t }
\t .hiddden {
position: absolute;
visibility: hidden;
}
.form-group h2{
margin-top: 40px;
margin-right:18px;
font-size:60px;
}
.input{
width:260px;
height: 50px;
font-size:30px;
}
.form-group span h2{
margin-right:105px;
}
.input:focus {
outline: #4CAF50 solid 1px;
}
.btn{
\t font-size:25px;
\t margin-bottom:12px;
\t border-radius: 5px;
\t padding:13px 24px;
\t \t background-color:#179b77;
}
@media only screen and (orientation: landscape) {
body{
margin:50px 0;
padding:0px;
text-align:center;
\t
}
.form-group h2{
margin-top: 40px;
font-size:65px;
display: inline;
}
.input{
width:45%;
\t height: 75px;
\t font-size:45px;
\t
}
.form-group span h2{
margin-right:107px;
}
.input:focus {
outline: #4CAF50 solid 1px;
}
.btn{
font-size:40px;
border-radius: 5px;
\t padding:5px 22px;
\t background-color:#179b77;
margin-right:-261px;
margin-top: -11px;
}
}
</style>
</head>
<body >
<div class="hiddden" id="demo">
<h2>Pack</h2>
<form action="/action_page.php">
<div class="form-group ">
<input type="text" class="input" placeholder="" autofocus>
\t <button type="button" class="btn btn-primary">Submit</button>
</div>
</form>
</div></div>
<div class="form" id="hide">
<div class="container">
<form action="/action_page.php">
<div class="form-group ">
\t <h2>Ope</h2>
<input type="text" class="input" id="one" placeholder="" autofocus>
</div>
</form>
<form action="/action_page.php">
<div class="form-group ">
\t <span> <h2>Na</h2> </span>
<input type="text" class="input" id="two" placeholder="" >
</div>
\t \t <button type="button" class="btn btn-primary" onclick="unesi(); unes(); return false;">G</button>
</form>
</div>
</div>
<script>
function unesi() {
document.getElementById('demo').style.display = "block";
document.getElementById('demo').style.filter = "initial";
document.getElementById('hide').style.display = "none";
}
function unes() {
document.getElementById('hide').style.display = "block";
document.getElementById('demo').style.display = "visible";
}
</script>
</body>
</html>
関数は呼び出されますが、 '.style.display =" visible "は何もしません。 – Teemu
もう一度見えるようにするには？ –
@Teemuで述べたような '可視性'は問題ですが、ロジックにも欠陥があります。それぞれの機能が何をしているのか考えてみましょう.1つは要素を切り替え、もう1つは元に戻すため、何も変わりません。 –