Cómo addEventListener a un elemento html si el elemento se inserta en el código html a través de este archivo js?

Question 1

Empujé a un <form> en el archivo HTML al archivo JS y, a continuación, addEventListener de esta forma, pero un error resulta: Uncaught TypeError: No se puede leer las propiedades de null (leyendo 'addEventListener').

Supongo que es porque este archivo JS está directamente relacionado con el archivo HTML que significa que el JS puede ser cargado antes de la <form>.

Puede alguien por favor me diga cómo resolver esto?

El JS códigos son los siguientes:

// 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()
})

Question 2

Usted necesidad de utilizar evento delegación en donde el usuario está conectado a un componente de los padres que captura los eventos de los elementos secundarios como ellos "burbuja" de la 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>

Andy · Answer 1 · 2021-11-20T22:52:06

Usted necesidad de utilizar evento delegación en donde el usuario está conectado a un componente de los padres que captura los eventos de los elementos secundarios como ellos "burbuja" de la 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>

Hola Andy! Gracias por ayudarme a salir de allí, evento delegación realmente funciona!!
NP Andy! Lo siento por la tardanza en responder asI soy nuevo en este sitio web por lo tanto no estoy familiarizado con todas las funciones

Cómo addEventListener a un elemento html si el elemento se inserta en el código html a través de este archivo js?

Pregunta

Mejor respuesta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría