Javascript ボタンを押したときの表示非表示切り替え
Q&A
Closed
解決したいこと
ここに解決したい内容を記載してください。
JQuery で書いたソースコードをJavascriptに書き直す練習をしています。
toggleを使って要素の切り替えをしている所をＪＳで一緒の動作を実現したいのですが上手く行きません。
最初は非表示の要素を
ボタンを押すことで切り替したいです。
解決方法を教えて下さい。
お願いします。
発生している問題・エラー
このような動作を実現したい
Javascriptで記述するとこのような動作になる
表示非表示の切り替えが上手くいかない。
最初から非表示にするとき ボタンを押しても表示がされない。
検証ツールではエラーが出ていない。
以下目的の動作
例）
NameError (uninitialized constant World)
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
該当するソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>formsample</title>
<link rel="stylesheet" type="text/css" href="css/logintest.css" media="all" />
<script src="https://code.jquery.com/jquery.min.js"></script>
</head>
<body>
<div class="sinkitouroku"> <input type="button" value="新規登録を表示" class="appear"/></div>
<div class="newform">
<h1>新規登録</h1>
<form method="POST" action="/signup">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="name"><input type="name" name="name" placeholder="名前"></div>
<div class="mail"><input type="text" name="email" placeholder="メールアドレス"></div>
<div class="password"><input type="password" name="password" placeholder="パスワード"></div>
<div class="password"><input type="password" name="password_confirmation" placeholder="パスワード再入力"></div>
<div class="loginbutton"><input type="submit" value="新規登録"></div>
</form>
</div>
<script src="js/logintest.js"></script>
</body>
</html>
以下の記述で記載した内容を普通のJavascriptに書き直す（jquery未使用にする。）
$(function() {
$('.newform').hide();
$('.sinkitouroku').click(function(){
$('.newform').toggle();
});
});
以下が自分が書きなおしたもの
const newform = document.getElementsByClassName("newform")[0];
const sinkitouroku = document.getElementsByClassName("sinkitouroku")[0];
document.addEventListener('DOMContentLoaded', function() {
/* ...ここに処理を書く... */
newform.style.visibility = "hidden";
sinkitouroku.addEventListener('click',()=>{
newform.classList.toggle('C');
});
});
CSS
.C{
visibility:visible;
}
自分で試したこと
toggleの使い方
addeventlistener の使い方をググって調べました。
0 likes
