javascript - Javascript OOP 非常新：通过输入将值传递给属性无法呈现单个元素

Question

我在通过 OOP 方法渲染单个“li”元素时遇到问题。

我正在从用户那里获取输入并使用此信息通过一个类创建一个项目。然后我将这个类连接到负责呈现列表的列表类。

一旦我通过单击事件侦听器获取值，singleTaskRendering 类就不起作用。我想知道我是否设置不正确？

const inputAccess = document.querySelector('.control').querySelector('input');  
const addItemBtnAccess = document.getElementById('add-item-btn'); 

const toDoList = []; 
const doneList = []; 

//ads a li id to the item 
const idGenerator = (array) => {
  let n = 1;
  let message = ''; 
  for (let i = 0; i < array.length; i++) {
     n += 1; 
  }
  message = `li-${n}`; 
  return message; 
}

class ItemTask {
  constructor(itemValue, idGen) {
    this.title = itemValue; 
    this.id = idGen; 
  }
}


const addItemBtnHandler = () => {
  const toDoList = []; 
  const inputValue = inputAccess.value; 
  const item= new ItemTask(inputValue, idGenerator(toDoList));
  toDoList.push(item);
  return toDoList;
}; 

class singleTaskRendering {
  constructor(product) {
    this.product = product;  
  }

  render() {
    const titleElement = document.createElement('div'); 
    titleElement.id = this.product.id; 
      titleElement.innerHTML = `
        <li>
          <h2>${this.product.title}</h2>
          <button>Done</button>
          <button>Delete</button>
        </li>`; 
      titleElement.draggable = true;
  }
}

class ItemLists {
  constructor(listId, items) {
    this.items = items; 
    this.listId = listId; 
    console.log(this.items, this.listId); 
  }
  renderList() {

    const renderHook = document.getElementById('hook'); 
    const createList = document.createElement('lu'); 
    createList.className = 'card'; 
    createList.id = `${this.listId}-list`;
      for(let item of this.items) {
        const newItem = new singleTaskRendering(item); 
        console.log(newItem); 
        const itemEl = newItem.render(); 
        console.log(itemEl, newItem); 
        createList.apppend(itemEl); 
      }
  renderHook.append(createList); 
  }
}

const itemList = new ItemLists('active', toDoList); 
itemList.renderList(); 

addItemBtnAccess.addEventListener('click', addItemBtnHandler); 

标签： javascript

Answer 1

您遇到的问题是您ItemLists在页面加载时调用，这意味着它只会处理一个空的toDoList.

• 我的解决方案是将 renderList 重命名为 appendItem。

• 在顶部声明它

• 不要将列表 id 和列表传递给构造函数，而是将其传递给 clickhandler 中的 appendItem。

   const inputAccess = document.querySelector('.control').querySelector('input');  
   const addItemBtnAccess = document.getElementById('add-item-btn'); 
   const itemList = new ItemLists(); 
  
   const toDoList = []; 
   const doneList = []; 
  
   //ads a li id to the item 
   const idGenerator = (array) => {
     let n = 1;
     let message = ''; 
     for (let i = 0; i < array.length; i++) {
        n += 1; 
     }
     message = `li-${n}`; 
     return message; 
   }
  
   class ItemTask {
     constructor(itemValue, idGen) {
       this.title = itemValue; 
       this.id = idGen; 
     }
   }
  
  
   const addItemBtnHandler = () => {
     const toDoList = []; 
     const inputValue = inputAccess.value; 
     const item= new ItemTask(inputValue, idGenerator(toDoList));
     itemList.appendItem('active', item); 
   }; 
  
   class singleTaskRendering {
     constructor(product) {
       this.product = product;  
     }
  
     render() {
       const titleElement = document.createElement('div'); 
       titleElement.id = this.product.id; 
         titleElement.innerHTML = `
           <li>
             <h2>${this.product.title}</h2>
             <button>Done</button>
             <button>Delete</button>
           </li>`; 
         titleElement.draggable = true;
     }
   }
  
   class ItemLists {
  
    appendItem(listId, item) {
  
       const renderHook = document.getElementById('hook'); 
       const createList = document.createElement('lu'); 
       createList.className = 'card'; 
       createList.id = `${listId}-list`;
           const newItem = new singleTaskRendering(item); 
           console.log(newItem); 
           const itemEl = newItem.render(); 
           console.log(itemEl, newItem); 
           createList.apppend(itemEl); 
     renderHook.append(createList); 
     }
   }
  
   addItemBtnAccess.addEventListener('click', addItemBtnHandler);