I am creating a simple To-Do List to practice deployment. When running my code, I get an error in the console that reads... Uncaught TypeError: Cannot read properties of null (reading 'appendChild') at HTMLButtonElement.
The HTML can be found below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/To-Do-List/styles.css">
<title>To-Do List</title>
</head>
<body>
<h1>To-Do List</h1>
<div class="contianer">
<input id="inputField" type="text"><button id="addToDo">+</button>
<div class="toDos" id="toDoContainer>">
</div>
</div>
<script src="/To-Do-List/script.js"></script>
</body>
</html>
This is the JavaScript that runs on the page...
let addToDoButton = document.getElementById('addToDo');
let toDoContainer = document.getElementById('toDoContainer');
let inputField = document.getElementById('inputField');
addToDoButton.addEventListener('click', function(){
var paragraph = document.createElement('p');
paragraph.classList.add('paragraph-stlying');
paragraph.innerText = inputField.value;
toDoContainer.appendChild(paragraph);
inputField.value = "";
paragraph.addEventListener('click', function() {
paragraph.style.textDecoration = "line-through";
})
paragraph.addEventListener('dblclick', function() {
paragraph.removeChild();
})
})
I am having trouble seeing what is causing this error because I followed along with a tutorial to create this. My code is identical to the video I was watching yet I am unable to yield the same results?
Another issue I have noticed is that when I click the button to add something to the list, a "p" element is not created in the DOM, which is what is expected.