I pushed a <form> to the HTML file by JS file, and then addEventListener to this form but an error turns out:
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener').
I assume that is because this JS file is linked directly to the HTML file which means the JS might be loaded before the <form>.
Can anyone please tell me how to resolve this?
The JS codes are below:
// skip to the input fields
$start.addEventListener('click', function(){
$chooseStory.remove()
const inputs = []
inputs.push(`
<form id="form">
<label>Provide The Following Words</lable>
`)
// assign words of stories to names and placeholders of inputs
// the input will automatically loop for as many as the words are
for (const word of stories[$index.value].words) {
inputs.push(`
<input type="text" name='${word}' placeholder="${word}">
`)}
inputs.push(`
<button type="submit" id="submit"> Read Story </button>
<code id="result"></code>
</form>
`)
const inputsField = inputs.join('')
$container.innerHTML += inputsField
})
// retrieve value of the form
const $form = document.getElementById('form')
$form.addEventListener('submit', function(e){
e.preventDefault()
})
You need to use event delegation wherein a listener is attached to a parent component which captures events from child elements as they "bubble up" the DOM.
// Adds a new form to the page
function addForm() {
const html = `
<form id="form">
<label>Provide The Following Words</lable>
<input />
<button type="submit" id="submit">Read Story</button>
<code id="result"></code>
</form>
`;
// Add the new HTML to the container
container.insertAdjacentHTML('beforeend', html);
}
function handleClick(e) {
// In this example we just want to
// to log the input value to the console
// so we first prevent the form from submitting
e.preventDefault();
// Get the id of the submitted form and
// use that to get the input element
// Then we log the input value
const { id } = e.target;
const input = document.querySelector(`#${id} input`);
console.log(input.value);
}
// Cache the container, and add the listener to it
const container = document.querySelector('#container');
container.addEventListener('submit', handleClick, false);
// Add the form to the DOM
addForm();<div id="container"></div>