HTML button calling Event listener not working HTML and JS

Question

I have made a list of items with JSON and JS and I need to be able to delete them.

function deleteList(){
  document.querySelector('#delete').addEventListener('click', (e) => {
    document.querySelector('#exerciseList').innerHTML = '';
  });
}

Here is my HTML button:

<button onclick="deleteList()" id="delete">Clear List</button>
<section id="exerciseList"></section>

are these just not connected right?

Answer 1

You either add an event listener or the onclick attribute, so

 function deleteList() { document.querySelector("#exerciseList").innerHTML = ""; }

 <button onclick="deleteList()" id="delete">Clear List</button> <section id="exerciseList">list</section>

or, recommended:

 document.querySelector("#delete").addEventListener("click", e => { document.querySelector("#exerciseList").innerHTML = ""; });

 <button id="delete">Clear List</button> <section id="exerciseList">list</section>