Comment la méthode addEventListener à un élément html si l'élément est poussé vers le html par le biais de ce fichier js?

Question 1

J'ai poussé un <form> le fichier HTML en JS fichiers, puis la méthode addEventListener à cette forme, mais une erreur s'avère que: Uncaught TypeError: Cannot read propriétés de null (en train de lire "la méthode addEventListener').

Je suppose que c'est parce que ce fichier JS est lié directement au fichier HTML qui signifie que le JS peut être chargé avant le <form>.

Quelqu'un peut-il me dire comment résoudre ce problème?

Les JS sont les codes ci-dessous:

// 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

Vous devez utiliser l' événement de la délégation par laquelle un écouteur est connecté à un composant parent qui capture les événements de l'enfant les éléments qu'ils "bulle" dans les 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

Vous devez utiliser l' événement de la délégation par laquelle un écouteur est connecté à un composant parent qui capture les événements de l'enfant les éléments qu'ils "bulle" dans les 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>

Salut Andy! Merci de m'aider à sortir de là, événement délégation fonctionne vraiment!!
NP Andy! Désolé pour le retard de réponse asI suis nouveau sur ce site donc je ne suis pas familier avec toutes les fonctions

Comment la méthode addEventListener à un élément html si l'élément est poussé vers le html par le biais de ce fichier js?

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie