Can anyone tell me what is wrong with my code? This works for all the other elements on the page but not this one, which is the parent to all of them.
let addButton = document.querySelector('.add-note');
addButton.addEventListener('click', (event) => {
//prevent refresh
event.preventDefault();
//note input value
let noteInput = document.querySelector(".note-input");
//create note container
let noteList = document.querySelector(".notes");
//create note
let note = document.createElement("li");
note.classList.add("note");
noteList.appendChild(note);
});<div class="title">
<h1>To Do List</h1>
</div>
<br>
<form>
<div class="add-note">
<input class="note-input" type="text" placeholder="Enter to-do item here"></input>
<button class="add" type="submit">+</button>
</div>
</form>
<br>
<ul className="notes" id="notes"></ul>Is this a React project? className is only available when using React.
<ul className="notes" id="notes"></ul>
change to
<ul class="notes" id="notes"></ul>
Your question i a tad unclear, but i think part of it is that you added the event listener to the div instead of the submit button. Change the class in your query selector to ".add" instead of ".add-note".