Cum să addEventListener la un element html dacă elementul este împins la html prin acest js fișiere?

Question 1

Am împins-o <form> pentru fișierul HTML, JS fișiere, și apoi addEventListener la această formă, dar o eroare dovedește: Neprins TypeError: nu se Poate citi proprietăți de nul (citit addEventListener').

Presupun că asta se datorează faptului că acest fișier JS este direct legat de fișierul HTML care înseamnă JS ar putea fi încărcate înainte de <form>.

Poate cineva te rog spune-mi cum de a rezolva acest lucru?

JS codurile de mai jos:

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

Aveți nevoie pentru a utiliza delegație eveniment în care un ascultător este atașat la un părinte componentă care surprinde evenimentele din elemente copil ca ei "bule" 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

Aveți nevoie pentru a utiliza delegație eveniment în care un ascultător este atașat la un părinte componentă care surprinde evenimentele din elemente copil ca ei "bule" 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! Mulțumesc pentru că mă ajuți acolo, eveniment delegația chiar functioneaza!!
NP Andy! Ne pare rău pentru întârziere răspuns asI sunt nou la acest site, prin urmare, nu sunt familiarizat cu toate funcțiile

Cum să addEventListener la un element html dacă elementul este împins la html prin acest js fișiere?

Problema

Cel mai bun răspuns

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie