現在、JavaScriptを学習している者です。
下記コードですが、JavaScript部分のforEach構文ですが、何をやっているのかは大体分かるのですが、どうしてこういう書き方をするのかがよく分かりません。
JavaScript
1inputs.forEach(input => input.addEventListener('change', handleUpdate));
質問内容ですが、下記のとおりです。
1、そもそもjQueryでないノーマルなjavascriptで、nodeNameの「input」がどうしてそのまま書けるのだろうと疑問です。
2、あと、=> は確か無名関数の書き方と記憶しているのですが上記コードは具体的にどのようなことをやっているのでしょうか?
全体のコードは下記のとおりです。
HTML
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Scoped CSS Variables and JS</title> 6</head> 7<body> 8 <h2>Update CSS Variables with <span class='hl'>JS</span></h2> 9 10 <div class="controls"> 11 <label for="spacing">Spacing:</label> 12 <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px"> 13 14 <label for="blur">Blur:</label> 15 <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px"> 16 17 <label for="base">Base Color</label> 18 <input id="base" type="color" name="base" value="#ffc600"> 19 </div> 20 21 <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
CSS
1:root { 2 --base: #ffc600; 3 --spacing: 10px; 4 --blur: 10px; 5 } 6 7 img { 8 padding: var(--spacing); 9 background: var(--base); 10 filter: blur(var(--blur)); 11 } 12 13 h1 { 14 color: var(--base); 15 } 16 17 body { 18 text-align: center; 19 background: #193549; 20 color: white; 21 font-family: 'helvetica neue', sans-serif; 22 font-weight: 100; 23 font-size: 50px; 24 } 25 26 .controls { 27 margin-bottom: 50px; 28 } 29 30 input { 31 width:100px; 32 }
JavaScript
1const inputs = document.querySelectorAll('.controls input'); 2 3 function handleUpdate() { 4 const suffix = this.dataset.sizing || ''; 5 //console.log(this.name); 6 document.documentElement.style.setProperty(`--${this.name}`,this.value + suffix); 7 } 8 9 console.log(inputs); 10 inputs.forEach(input => input.addEventListener('change', handleUpdate)); 11 inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。