Question

过去几天一直试图解决这个问题。令人惊讶的是，我的复选框和Localstorage都可以工作，但在控制台中，它显示错误＆＃34; 未捕获的TypeError：无法读取属性＆＃39;已完成＆＃39;未定义的＆＃34;。我尽力解决这个问题，让错误消失，但没有运气。我知道我正在尝试拨打＆＃34; .done ＆＃34;不存在的财产但我该如何解决这个问题？我有谷歌，并在SO上阅读所有类似的问题。

我认为在控制台中忽略此错误是不可接受的？有人可以指导/帮助我吗？请只是JavaScript，没有jQuery。谢谢！

错误来自函数checkAll（）和uncheckAll（）。

function checkAll() {
var getInputs = document.getElementsByTagName("input");
for (var i = 0, max = getInputs.length; i < max; i++) {
    if (getInputs[i].type === 'checkbox')
    getInputs[i].checked = true;            
    items[i].done = true; 
    localStorage.setItem('items', JSON.stringify(items));        
    }
}

和

function uncheckAll() {
var getInputs = document.getElementsByTagName("input");
for (var i = 0, max = getInputs.length; i < max; i++) {
    if (getInputs[i].type === 'checkbox') 
     getInputs[i].checked = false;               
     items[i].done = false; 
     localStorage.setItem('items', JSON.stringify(items));
     } 
}

我的代码如下：

<script>
  const addItems = document.querySelector('.add-items');
  const itemsList = document.querySelector('.plates');
  const items = JSON.parse(localStorage.getItem('items')) || [];

  function addItem(e) {
    e.preventDefault();
    const text = (this.querySelector('[name=item]')).value;
    const item = {
        text,
        done: false
    };

    items.push(item);
    populateList(items, itemsList);
    localStorage.setItem('items', JSON.stringify(items));
    this.reset();
  }

  function populateList(plates = [], platesList) {
    platesList.innerHTML = plates.map((plate, i) => {
        return `
            <li>
            <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} />
            <label for="item${i}">${plate.text}</label>
            </li>
        `;
    }).join('');
  }

function toggleDone(e) {
    if(!e.target.matches('input')) return; //skip unless its an input
    const el = e.target;
    const index = el.dataset.index;
    items[index].done = !items[index].done;
    localStorage.setItem('items', JSON.stringify(items));
    populateList(items, itemsList);
}
  addItems.addEventListener('submit', addItem);
  itemsList.addEventListener('click', toggleDone);

  populateList(items, itemsList);

// Challenge: Button: clear all, check all, uncheck all

function checkAll() {
    var getInputs = document.getElementsByTagName("input");
    for (var i = 0, max = getInputs.length; i < max; i++) {
        if (getInputs[i].type === 'checkbox')
        getInputs[i].checked = true;            
        items[i].done = true; 
        localStorage.setItem('items', JSON.stringify(items));        
        }
}

function uncheckAll() {
    var getInputs = document.getElementsByTagName("input");
    for (var i = 0, max = getInputs.length; i < max; i++) {
        if (getInputs[i].type === 'checkbox') 
         getInputs[i].checked = false;               
         items[i].done = false; 
         localStorage.setItem('items', JSON.stringify(items));
         } 
}

function clearItem() {
    localStorage.clear();   
    var element = document.getElementById("plates");
    element.parentNode.removeChild(element);
    location.reload();      
    console.log('Items cleared in localStorage');
  }
</script>

Answer 1

因为您要将数组初始化为空，如果items中没有设置localstorage

const items = JSON.parse(localStorage.getItem('items')) || [];

您的items[i]可能是undefined。

您需要更改

items[i].done = false;  //similarly for true

到

items[i] = items[i] || {};
items[i].done = false; //or true

未捕获的TypeError：无法读取属性＆＃39;已完成＆＃39;未定义的Javascript

1 个答案: