リファクタリングとクロージャがうまくできません。
解決済
回答 2
投稿
- 評価
- クリップ 1
- VIEW 835
前提・実現したいこと
JavaScriptのリファクタリングを勉強していたら、分からなくなりました。
問題点は
function priorityColorChange と function moveItem を
function addItemの中から出したいのですが、出すと変数itemが取れなくなります。
シンプルなto do リストのコードです。
プログラミング入門者なので、質問が下手かも知れませんが、助けていただけると嬉しいです。
発生している問題・エラーメッセージ
問題点は
function priorityColorChange と function moveItem を
function addItemの中から出したいのですが、出すと変数itemが取れなくなります。
###該当のソースコードJavaScript
window.addEventListener('load', init);
function init () {
var okBtn = document.getElementById('btn');
okBtn.addEventListener('click', addItem);
}
function addItem(){
var task = document.getElementById('task');
var priority = document.getElementById('priority');
var taskList = document.getElementById('taskList');
var doneList = document.getElementById('doneList');
var item = document.createElement('li');
var deleteBtn = document.createElement('button');
var priorityClone = priority.cloneNode(true);
var color;
deleteBtn.innerHTML = 'delete';
item.innerHTML = task.value;
item.style.color = getColor(priority.value);
item.appendChild(priorityClone);
item.appendChild(deleteBtn);
taskList.appendChild(item);
priorityClone.addEventListener('change', priorityColorChange);
function priorityColorChange (event) {
item.style.color = getColor(event.target.value);
}
deleteBtn.addEventListener('click', moveItem);
function moveItem (){
taskList.removeChild(item);
item.removeChild(priorityClone);
item.removeChild(deleteBtn);
doneList.appendChild(item);
}
}
function getColor(value) {
switch ( Number(value) ) {
case 1:
return '#f62';
case 2:
return '#fc0';
case 3:
return '#0af';
}
}
```
試したこと
クロージャで解決できるというところまでは、調べて分かったのですが
このコードにどうやって適用できるのかが、いろいろ試してみたのですが分かりませんでした。
大変初歩的な問題だと思うのですが、どうぞよろしくお願い致します。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+1
function addItem(){
var task = document.getElementById('task');
var priority = document.getElementById('priority');
var taskList = document.getElementById('taskList');
var doneList = document.getElementById('doneList');
var item = document.createElement('li');
var deleteBtn = document.createElement('button');
var priorityClone = priority.cloneNode(true);
var color;
deleteBtn.innerHTML = 'delete';
item.innerHTML = task.value;
item.style.color = getColor(priority.value);
item.appendChild(priorityClone);
item.appendChild(deleteBtn);
taskList.appendChild(item);
priorityClone.addEventListener('change', priorityColorChange);
var a1 = function priorityColorChange (event) {
item.style.color = getColor(event.target.value);
}
deleteBtn.addEventListener('click', moveItem);
var a2 = function moveItem (){
taskList.removeChild(item);
item.removeChild(priorityClone);
item.removeChild(deleteBtn);
doneList.appendChild(item);
}
// ここで出してしまう。これがクロージャ。
return {
priorityColorChange:a1,
moveItem:a2
}
}returnによって関数を外だしします。
すると
item = addItem()
item.moveItem()
のように呼べるようになり、かつクロージャなので、itemにはアクセス可能です。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
priorityClone.addEventListener('change', priorityColorChange);
function priorityColorChange (event) {
item.style.color = getColor(event.target.value);
}↑この部分、
priorityClone.addEventListener('change', priorityColorChange(item));var priorityColorChange = function(item){
return function(event) {
item.style.color = getColor(event.target.value);
}
}
↑こんな風にすれば外だしできますね。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
