リファクタリングとクロージャがうまくできません。

Question

###前提・実現したいこと
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';
}
}

###試したこと
クロージャで解決できるというところまでは、調べて分かったのですが
このコードにどうやって適用できるのかが、いろいろ試してみたのですが分かりませんでした。
大変初歩的な問題だと思うのですが、どうぞよろしくお願い致します。

Answer 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にはアクセス可能です。

Answer 2

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);
  }
}

↑こんな風にすれば外だしできますね。