質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

2207閲覧

クロージャを使って複数のチェックボックスのオンオフの状態を把握、保持する書き方をご教示ください

true

総合スコア440

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2015/06/30 05:00

いつもありがとうございます。
今回、チェックボックスをオンにすると対応するデータが配列listに保持され、
オフにするとlistから外され、表示ボタンを押すと保持されているデータが表示されるスクリプトを作っています。テーブルの表の左端にチェックボックスを設けてチェックされた行に仕込まれているidをAjaxでphpなどのサーバーサイドに渡してDBから削除する、といった用途を想定しています。

このような場合、私はついグローバル変数を使ってしまうのですが、前々からグローバル変数は使うべきではないと書籍でもネット上でも書かれていますし、なんか格好悪いなと思っていました。

で、クロージャを使うとクールに書けることはわかって、またいくつかクロージャのサンプルを真似てみたりしたのですが、いざ自分のコードをクロージャで書き換えようとしても具体的にどうやって書けばいいのか分かりません。よろしくお願い致します。

ブラウザはchrome、バージョン 43.0.2357.130 (64-bit)です。

lang

1 program.html 2 3 1 <html> 4 2 <body> 5 3 <pre> 6 4 <script src="program.js"> 7 5 </script> 8 6 </pre> 9 7 <div id="result"></div> 10 8 </body> 11 9 </html> 12

lang

1 program.js 2 3 1 var list = []; 4 2 5 3 window.onload = function() { 6 4 var out = "<table id='tb' border='1'>"; 7 5 for (var i=0; i<3; i++) { 8 6 out += "<tr>" 9 7 out += "<td><input type='checkbox' onclick='chk(this);' /></td>"; 10 8 out += "<td>"+i+"</td>"; 11 9 out += "</tr>"; 12 10 } 13 11 out += "</table>"; 14 12 out += "<input type='button' value='表示' onclick='show();' />" 15 13 document.getElementById("result").innerHTML = out; 16 14 } 17 15 18 16 var chk = function(e) { 19 17 var chkid = e.parentNode.nextSibling.childNodes[0].nodeValue; 20 18 if (e.checked) { 21 19 list.push(chkid); 22 20 } else { 23 21 for (var i=0; i<list.length; i++) { 24 22 if (list[i] == chkid) { 25 23 list.splice(i, 1); 26 24 } 27 25 } 28 26 } 29 27 } 30 28 31 29 function show() { 32 30 console.log(list); 33 31 }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

私には根本的に、チェックボックスをクリックしたときにリストを追加したり削除したりする処理が野暮ったく、クールではないコードに見えてしまいます…。ボタンを押したときに情報を集めるつくりにした方が、クールになると思います。

また、このコードではクロージャーにする意味がまったくありません。ので、クロージャーを使う意味のある形に書き換えるとこんな感じになりました。listをクロージャーに持たせる意味がないので、idを持たせました。あと、「クロージャーなんだよ」ということを強調するために、ボタンを押した回数も表示するようにしました。

あなたの最初の意図と少しずれているかもしれませんが。

lang

1<html> 2<head> 3<script src="program.js"></script> 4</head> 5 6<body> 7 8<div id="result1"></div> 9<div id="result2"></div> 10<div id="result3"></div> 11 12</body> 13</html>

lang

1window.onload = function() { 2 build(1); 3 build(2); 4 build(3); 5}; 6 7function build(id) { 8 var out = "<table id='tb' border='1'>"; 9 for (var i = 0; i < 3; i++) { 10 out += "<tr>" 11 out += "<td><input type='checkbox' name='chk" + id + "'></td>"; 12 out += "<td>" + i + "</td>"; 13 out += "</tr>"; 14 } 15 out += "</table>"; 16 out += "<input type='button' value='表示' id='btn" + id + "'>" 17 document.getElementById("result" + id).innerHTML = out; 18 19 var c = 0; 20 document.getElementById("btn" + id).onclick = function() { 21 var chks = document.getElementsByName("chk" + id); 22 var list = []; 23 for (var i = 0; i < chks.length; i++) { 24 if (chks[i].checked) { 25 list.push(i); 26 } 27 } 28 c++; 29 console.log("id" + id + "の" + c + "回目:" + list); 30 }; 31}

投稿2015/06/30 10:36

miu_ras

総合スコア902

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

true

2015/06/30 12:30

大変参考になりました。仰るようにボタンをクリックしたときにチェックの有無を調べて一度に取得すれば済む話なのでグローバル変数もクロージャも必要ないですね。見落としていました。また、クロージャについて、外側で定義された変数cについて、内側の関数から参照している様子が理解できました。これでまたクロージャについての理解が進みました。ありがとうございました。
guest

0

いちばん手っ取り早いのは、全体を

lang

1(function(){ 2 3/* ここに元のコードを書く */ 4 5}());

というように覆ってしまう方法です。これで、宣言した変数は外側の関数に対してローカルとなります。

投稿2015/06/30 05:04

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

true

2015/06/30 12:33

ありがとうございました。試しに外側にも同じ変数を定義したらちゃんと内側の変数のみが有効になっていました。この方法も以前から気になっていたので利用していきたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問