2013-11-03 42 views
2

我正在通過製作一個簡單的t-do應用程序來學習phonegap。phonegap:函數沒有被調用

的index.html:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>To-dos</title> 
    </head> 
    <body onload='loadToDoList()'> 
     <input type='button' value='Add To-do' onclick='createNewToDo()'/> 
     <input type='button' value='Remove completed To-dos' onclick='removeCompletedTasks()'/> 
     <br/><br/> 
     <table id='dataTable' width='100%' border='1'> 
     </table> 
     <script src='js/index.js'></script> 
    </body> 
</html> 

index.js:

(function() { 
    var addTableRow, checkboxClicked, deleteAllRows, deleteSelectedRow, loadToDoList, saveToDoList, viewSelectedRow; 

    window.rowID = 0; 

    saveToDoList = function() { 
    var checkBoxState, chkbox, i, row, rows, table, textValue, textbox, todoArray, _i, _len; 
    todoArray = {}; 
    checkBoxState = 0; 
    textValue = ''; 
    table = document.getElementById('dataTable'); 
    rows = table.rows; 
    if (rows.length > 0) { 
     i = 0; 
     for (_i = 0, _len = rows.length; _i < _len; _i++) { 
     row = rows[_i]; 
     chkbox = rows.cells[0].childNodes[0]; 
     if ((chkbox != null) && chkbox.checked === true) { 
      checkBoxState = 1; 
     } else { 
      checkBoxState = 0; 
     } 
     textbox = row.cells[1].childNodes[0]; 
     textValue = textbox.value; 
     todoArray["row" + (i++)] = { 
      check: checkBoxState, 
      text: textValue 
     }; 
     } 
    } else { 
     todoArray = null; 
    } 
    return window.localStorage.setItem('todoList', JSON.stringify(todoArray)); 
    }; 

    loadToDoList = function() { 
    var i, key, theList, val, _results; 
    theList = JSON.parse(window.localStorage.getItem('todoList')); 
    deleteAllRows(); 
    if (theList !== null && theList !== 'null') { 
     i = 0; 
     _results = []; 
     for (key in theList) { 
     val = theList[key]; 
     _results.push(addTableRow(theList["row" + (i++)], true)); 
     } 
     return _results; 
    } 
    }; 

    deleteAllRows = function() { 
    var i, rowCount, table, _i; 
    table = document.getElementById('dataTable'); 
    rowCount = table.rows.count; 
    for (i = _i = 0; 0 <= rowCount ? _i < rowCount : _i > rowCount; i = 0 <= rowCount ? ++_i : --_i) { 
     table.deleteRow(i); 
     rowCount--; 
     i--; 
    } 
    return saveToDoList(); 
    }; 

    viewSelectedRow = function(todoTextField) { 
    return alert(todoTextField.value); 
    }; 

    deleteSelectedRow = function(deleteButton) { 
    deleteButton.parentNode.parentNode.parentNode.removeChild(); 
    return saveToDoList(); 
    }; 

    checkboxClicked = function() { 
    var chkbox, row, rows, table, textbox, _i, _len, _results; 
    table = document.getElementById('dataTable'); 
    rows = table.rows; 
    _results = []; 
    for (_i = 0, _len = rows.length; _i < _len; _i++) { 
     row = rows[_i]; 
     chkbox = row.cells[0].childNodes[0]; 
     textbox = row.cells[1].childNodes[0]; 
     if ((chkbox != null) && chkbox.checked === true && (textbox != null)) { 
     textbox.style.setProperty('text-decoration', 'line-through'); 
     } else { 
     textbox.style.setProperty('text-decoration', 'none'); 
     } 
     _results.push(saveToDoList()); 
    } 
    return _results; 
    }; 

    addTableRow = function(todoDictionary, appIsLoading) { 
    var cell1, cell2, element1, element2, row, rowCount, table; 
    rowID++; 
    table = document.getElementById('dataTable'); 
    rowCount = table.rows.length; 
    row = table.insertRow(rowCount); 
    cell1 = row.insertCell(0); 
    element1 = document.createElement('input'); 
    element1.type = 'checkbox'; 
    element1.name = 'chkbox[]'; 
    element1.checked = todoDictionary['check']; 
    element1.setAttribute('onclick', 'checkboxClicked()'); 
    cell1.appendChild(element1); 
    cell2 = row.insertCell(1); 
    element2 = document.createElement('input'); 
    element2.type = 'text'; 
    element2.name = 'txtbox[]'; 
    element2.size = 16; 
    element2.id = 'text' + rowID; 
    element2.value = todoDictionary['text']; 
    element2.setAttribute('onchange', 'saveToDoList()'); 
    cell2.appendChild(element2); 
    checkboxClicked(); 
    saveToDoList(); 
    if (!appIsLoading) { 
     return alert('Task added successfully'); 
    } 
    }; 

    window.createNewToDo = function() { 
    var todo, todoDictionary; 
    todoDictionary = {}; 
    todo = prompt('To-Do', ''); 
    if (todo != null) { 
     if (todo === '') { 
     return alert('To-Do can\'t be empty'); 
     } else { 
     todoDictionary = { 
      check: 0, 
      text: todo 
     }; 
     return addTableRow(todoDictionary, false); 
     } 
    } 
    }; 

    window.removeCompletedTasks = function() { 
    var chkbox, i, rowCount, table, _i; 
    table = document.getElementById('dataTable'); 
    rowCount = table.rows.length; 
    for (i = _i = 0; 0 <= rows ? _i < rows : _i > rows; i = 0 <= rows ? ++_i : --_i) { 
     chkbox = table.rows[i].cells[0].childNodes[0]; 
     if ((chkbox != null) && chkbox.checked === true) { 
     table.deleteRow(i); 
     i--; 
     rowCount--; 
     } 
    } 
    saveToDoList(); 
    return alert('Completed tasks were removed'); 
    }; 

}).call(this); 

createNewToDo功能正常工作,因爲我能夠創造新的待辦事項。但是,當我檢查待辦事項並點擊刪除按鈕時,什麼也沒有發生。爲什麼我的removeCompletedTasks函數沒有被調用?

+0

如果您提供小提琴來查看您的代碼,這將很酷 –

回答

0

這是在JSFiddle提供的代碼。我可以看到removeCompletedTasks失敗的主要原因是行未定義。在修復之後,其他錯誤是由您在外部函數內定義的方法引起的。一旦完成,它們就消失了,不能被調用。

每種方法都需要有窗口。在他們面前。然後saveToDoList需要一些工作。表方法不起作用,直接進入行。一旦你有你想要使用該參考的行。

window.saveToDoList = function() { 
    var checkBoxState, chkbox, i, row, rows, textValue, textbox, todoArray, _i, _len; 
    todoArray = {}; 
    checkBoxState = 0; 
    textValue = ''; 
    rows = document.getElementById('dataTable').rows; 
    if (rows.length > 0) { 
    i = 0; 
    for (_i = 0, _len = rows.length; _i < _len; _i++) { 
     row = rows[_i]; 
     chkbox = row.childNodes[0]; 
     if ((chkbox != null) && chkbox.checked === true) { 
     checkBoxState = 1; 
     } else { 
     checkBoxState = 0; 
     } 
     textbox = row.childNodes[1]; 
     textValue = textbox.value; 
     todoArray["row" + (i++)] = { 
     check: checkBoxState, 
     text: textValue 
     }; 
    } 
    } else { 
    todoArray = null; 
    } 
    return window.localStorage.setItem('todoList', JSON.stringify(todoArray)); 
}; 

使用該方法,現在removeCompletedTasks需要一些微調。循環可以簡化爲一個簡單的循環。刪除行是通過每次刷新它來完成的,我知道這個速度較慢,但​​至少chrome會按照原來的方式返回表函數。要獲得複選框,還需要一層兒童脫皮,現在它可以工作。

window.removeCompletedTasks = function() { 
    var chkbox, i, rowCount, rows; 
    rows = document.getElementById('dataTable').rows; 
    rowCount = rows.length; 
    for (i = 0; i < rowCount; ++i) { 
     chkbox = rows[i].childNodes[0].childNodes[0]; 
     if ((chkbox != null) && chkbox.checked === true) { 
     document.getElementById("dataTable").deleteRow(i); 
     --i; 
     --rowCount; 
     } 
    } 
    saveToDoList(); 
    return alert('Completed tasks were removed'); 
    }; 

查看工作示例的新JSFiddle