JavaScriptでradioボタンで選択して背景色を変える(for loop を使って)

###前提・実現したいこと
JavaScript で、ラジオボタンを使って、背景色を変更するとき、個々のラジオボタンにid をふって特定するのではなく、document.getElementsByName('color')のようにして、配列に格納し、クリックされたラジオボタンのvalue に設定された背景色をページに設定するように、配列とループとif を使ってできないかなといろいろ試してみたのですが、まだ、理解が浅いようでうまくいきません。

###発生している問題・エラーメッセージ

エラーメッセージ

###該当のソースコード

JavaScript
1○ IDをふれば書ける
2<body>
3<form id="myForm">
4  <input type="radio" name ="color" id="g" value="green">green
5  <input type="radio" name ="color" id="r" value="red">red
6</form>
7  
8<script>
9  g.onclick =function(){document.body.style.background = g.value;}
10 r.onclick =function(){document.body.style.background = r.value;}  
11</script>
12</body>
13</html>
14
15○ 配列に入れて1つづつ取り出すなら書ける
16<body>
17<form id="myForm">
18  <input type="radio" name ="color"  value="green">green
19  <input type="radio" name ="color"  value="red">red
20</form>  
21  
22<script>
23   var c = document.getElementsByName('color');       
24	c[0].onclick =function(){document.body.style.background = c[0].value;}
25	c[1].onclick =function(){document.body.style.background = c[1].value;}  
26</script>
27
28**<ここが知りたい！>**
29○ for を使ってラジオボタンがチェックされているかどうか順次チェックし、
30○ チェックされていたら背景色を、選択されているラジオボタンの値に変えるという風に書きたい
31と思い、↓のように、書いてみたりしてみたのですが、うまくいきません....
32
33
34<script>
35var c = document.getElementsByName('color');  
36for(i=0; i<c.length; i++){
37	c[i].onclick= function(){document.body.style.backcground = c[i].value;
38                 }
39	}
40
41</script>
42
43注 本当は、 if(c[i].checked) のように書きたい....

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

行動規範の内容に同意します

回答1件

ベストアンサー

onclick を実行する時点で変数 i が c.length になっているからそうなりますので、let か即時関数で処理しましょう。

JavaScript
1var c = document.getElementsByName( 'color' );  
2for ( let i=0; i<c.length; i++ ) {
3	c[ i ].onclick = function() {
4		document.body.style.backgroundColor = c[ i ].value;
5	}
6} // let
7```**動くサンプル：**[https://jsfiddle.net/6x1o1fp7/](https://jsfiddle.net/6x1o1fp7/)
8
9
10```JavaScript
11var c = document.getElementsByName( 'color' );  
12for ( var i=0; i<c.length; i++ ) {
13	( function( k ) { c[ k ].onclick = function() {
14		document.body.style.backgroundColor = c[ k ].value;
15	} } )( i );
16} // 即時関数
17```**動くサンプル：**[https://jsfiddle.net/6x1o1fp7/1/](https://jsfiddle.net/6x1o1fp7/1/)

投稿2016/10/15 17:13

kei344

総合スコア69407

margutta

2016/10/16 04:42

丁寧な回答を付けていただきありがとうございました。即時関数の最後のかっこは（）即時に実行されるための飾りではないこと、パラメータを格納できることを初めて知りました。また、let の威力を知り、目から鱗でした。本当にありがとうございます。 let と var の使い分けについて、まだよくわかっていないので、整理してまた、質問をさせていただきたいと思います。貴重なお時間を割いていただき、また、惜しみなく知識を授けてくださりありがとうございます。

行動規範の内容に同意します