วิธี addEventListener ต้องเป็นแบบ html ธาตุถ้าธาตุมักผลักไปกอง html องผ่านเรื่องนี้ js แฟ้มหรือไม่?

Question 1

ฉันผลักดัน <form> ไปยังแฟ้ม HTML โดย JS แฟ้มแล้ว addEventListener ต้องแบบฟอร์มแต่ข้อผิดพลาดเกิดขึ้นระหว่างกลายเป็น: Uncaught TypeError:ไม่สามารถอ่านคุณสมบัติของโพรโทคอล aimcomment(การอ่าน'addEventListener').

ฉันคิดว่านั่นเป็นเพราะนี่ JS แฟ้มเชื่อมโยงโดยตรงไปยังแฟ้ม HTML ซึ่งหมายความว่า JS อาจจะเป็นโหลดก่อน <form>.

ใครก็ได้ได้โปรบอกด้วยละว่าเขาแกร่งแค่ไหนที่จะต้องแก้ไขเรื่องนี้?

ที่ JS รหัสคือด้านล่างนี้:

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

คุณต้องใช้ เหตุการณ์ delegation wherein เป็นผู้ฟังที่เป็นยึดติดกับผู้ปกครองส่วนประกอบที่เหตุการณ์จับภาพจากเด็กส่วนประกอบที่พวกเขา"ฟองขึ้น"การ 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

คุณต้องใช้ เหตุการณ์ delegation wherein เป็นผู้ฟังที่เป็นยึดติดกับผู้ปกครองส่วนประกอบที่เหตุการณ์จับภาพจากเด็กส่วนประกอบที่พวกเขา"ฟองขึ้น"การ 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>

หวัดดีแอนดี้! ขอบคุณที่ช่วยฉันออกไปที่เหตุการณ์ delegation จริงๆทำงาน!!
NP แอนดี้! ขอโทษที่มาสายตอบสนอง asI นใหม่เว็บไซต์ดังนั้นฉันไม่คุ้นกับทุกคนฟังก์ชัน

วิธี addEventListener ต้องเป็นแบบ html ธาตุถ้าธาตุมักผลักไปกอง html องผ่านเรื่องนี้ js แฟ้มหรือไม่?

คำถาม

คำตอบที่ดีที่สุด

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่