I have a project for managing a todo list. When I click an "add" button, it creates a div element with another "add" button inside it. That part is easy. But now, I want to select that inner button so that I can use it to add a text input form inside the newly created div.
I suspect that the reason it's not working is because the element doesn't exist at the time of selection.
const addButton = document.querySelector('.addButton');
const addListItem = document.querySelector('.addListItem');
const todoDiv = document.querySelectorAll('.todoDiv');
addButton.addEventListener('click', () => {
let div = document.createElement('div');
div.setAttribute('class', 'todoDiv');
div.innerHTML = '<a href="#" class="addListItem"><i class="fas fa-plus fa-2x"></a>'
document.body.appendChild(div);
});
addListItem.addEventListener('click', () => {
let inputBox = document.createElement('input');
inputBox.setAttribute('type', 'text');
document.todoDiv.appendChild(inputBox);
});
Here's my HTML as well just in case:
<body>
<div class="sideNav">
<p class="heading"></td></p>
<a href="#" class="addButton sideButton"><i class="fas fa-plus fa-2x"></i></a>
<a href="#" class="sideButton"><i class="fas fa-project-diagram fa-2x"></i></a>
<a href="#" class="sideButton"><i class="fas fa-user fa-2x"></i></a>
<a href="#" class="sideButton"><i class="fas fa-cog fa-2x"></i></a>
</div>
<script src="script.js"></script>
</body>
The first event will create a div with a plus symbol. Upon clicking the plus icon in the newly created div, I want a text input form to appear. Any assistance on this matter will be highly appreciated!