Javascript forEach 使い方
今回はforEachによるloginとlogoutのレイアウト変更について
コードは以下
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.hidden{
display: none;
}
</style>
<body>
<form action="" class="form hidden">
<input type="text">
<br>
<textarea name="" id="text" cols="30" rows="10"></textarea>
</form>
<button class="login">login</button>
<button class="logout hidden">logout</button>
<script>
let form = document.querySelector('.form');
let login = document.querySelector('.login');
let logout = document.querySelector('.logout');
login.addEventListener('click', function(){
[form, logout].forEach(function(e){
e.classList.remove('hidden');
});
login.classList.add('hidden');
});
logout.addEventListener('click', function(){
[form, logout].forEach(function(e){
e.classList.add('hidden');
});
login.classList.remove('hidden');
});
</script>
</body>
</html>
forEachを使用しclass「hidden」を出し入れしている。
forEachの基本的な使い方は
配列.forEach(function(){});
となり関数内の内容を配列の中の要素全てに対して行う
let arr2 = [{name:'あ', price:100},
{name:'い', price:200},
{name:'う', price:300}
]
});
上記では配列の中のオブジェクトの値を取り出すことも可能
consoleでは
test.html:20 100
test.html:20 200
test.html:20 300
と表示される。
参考：https://www.sejuku.net/blog/20257
他にも実戦では要素を作ってappendすることをforEachで上手くやっているのを見かけるが、まだ理解が追いついていない
続く
