Uncaught TypeError：HTMLFormElement.addItem（script.js：17）のpopulateList（script.js：22）でnullのプロパティ 'innerHTML'を設定できません

Question

私はエラーを修正しようとしていますが、まだUncaught TypeError例外：ulタグに

const addItems = document.querySelector('.add-items'); 
 
const itemsList = document.querySelector('.plates'); 
 
const items = []; 
 

 
function addItem(e) { 
 
\t e.preventDefault(); 
 
\t //console.log('Hello'); 
 
\t const text = (this.querySelector('[name=item]')).value; 
 
\t const item = { 
 
\t \t text, 
 
\t \t done: false 
 
\t }; 
 
\t //console.log(item); 
 
\t items.push(item); 
 
\t populateList(items, itemsList); 
 
\t this.reset(); 
 
} 
 

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

 
addItems.addEventListener('submit', addItem);

<div class="wrapper"> 
 
    <h2>LOCAL TAPAS</h2> 
 
    <p></p> 
 
    <ul> 
 
    <li>Loading Tapas...</li> 
 
    </ul> 
 
    <form class="add-items"> 
 
    <input type="text" name="item" placeholder="Item Name" required> 
 
    <input type="submit" value="+ Add Item"> 
 
    </form> 
 

 
</div>

Answer 1

追加クラスclass="plates"：HTMLFormElement.addItem（17 script.js）で：populateList（22 script.js）でヌルのプロパティ 'innerHTMLプロパティ' を設定することはできません

const addItems = document.querySelector('.add-items'); 
 
const itemsList = document.querySelector('.plates'); 
 
const items = []; 
 

 
function addItem(e) { 
 
\t e.preventDefault(); 
 
\t //console.log('Hello'); 
 
\t const text = (this.querySelector('[name=item]')).value; 
 
\t const item = { 
 
\t \t text, 
 
\t \t done: false 
 
\t }; 
 
\t //console.log(item); 
 
\t items.push(item); 
 
\t populateList(items, itemsList); 
 
\t this.reset(); 
 
} 
 

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

 
addItems.addEventListener('submit', addItem);

<div class="wrapper"> 
 
    <h2>LOCAL TAPAS</h2> 
 
    <p></p> 
 
    <ul class="plates"> 
 
    <li>Loading Tapas...</li> 
 
    </ul> 
 
    <form class="add-items"> 
 
    <input type="text" name="item" placeholder="Item Name" required> 
 
    <input type="submit" value="+ Add Item"> 
 
    </form> 
 

 
</div>