import {createTasks} from './app.js';
document.addEventListener("DOMContentLoaded", function () {
function showNewTaskModal () {
newTaskModal.classList.add('show');
const html = `
<div id="rowrow">
<input type="text" placeholder="New Task"></input>
<input type="text" placeholder="Add description"></input>
<div id="row22">
<button>
<img src="./Icons/clock.png">
</button>
<button>
<img src="./Icons/star_empty.png">
</button>
<button onclick="createTasks()">
Save
</button>
</div>
</div>
`;
newTaskModal.innerHTML = html;
document.body.appendChild(newTaskModal);
}
}
The createTasks() function is not recognized within the HTML template literal and leads to a reference error when clicked on the button. The solution that works is to add the HTML to the DOM first, then add an event listener to the button.
Error message: index.html:1 Uncaught ReferenceError: createTasks is not defined at HTMLButtonElement.onclick (index.html:1:1) onclick @ index.html:1