कैसे करने के लिए addEventListener करने के लिए एक html तत्व को यदि तत्व के लिए धक्का दिया है html के माध्यम से यह js फाइल है?

Question 1

मैं एक धक्का दिया <form> करने के लिए HTML फ़ाइल जे एस फ़ाइल, और फिर addEventListener इस फार्म के लिए, लेकिन एक त्रुटि का पता चला: Uncaught TypeError: नहीं पढ़ सकते हैं के गुण अशक्त (पढ़ना 'addEventListener').

मुझे लगता है कि इस वजह से जे एस फ़ाइल से जुड़ा हुआ है सीधे करने के लिए HTML फ़ाइल का मतलब है जो जे एस लोड किया जा सकता से पहले <form>.

कर सकते हैं किसी को भी कृपया मुझे बताओ कि कैसे इसे हल करने के लिए?

जे एस कोड के नीचे हैं:

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

आप की जरूरत है का उपयोग करने के लिए घटना प्रतिनिधिमंडल जिसमें एक श्रोता से जुड़ा हुआ है के लिए एक माता पिता, जो घटक कब्जा घटनाओं से बच्चे तत्वों के रूप में वे "बुलबुला" 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

आप की जरूरत है का उपयोग करने के लिए घटना प्रतिनिधिमंडल जिसमें एक श्रोता से जुड़ा हुआ है के लिए एक माता पिता, जो घटक कब्जा घटनाओं से बच्चे तत्वों के रूप में वे "बुलबुला" 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>

हाय एंडी! धन्यवाद मेरी मदद करने के लिए वहाँ से बाहर, घटना प्रतिनिधिमंडल वास्तव में काम करता है!!
एनपी एंडी! क्षमा करें देर के लिए जवाब में एएसआई के लिए नया हूँ यह वेबसाइट इसलिए मैं से परिचित नहीं हूँ सभी कार्यों के साथ

कैसे करने के लिए addEventListener करने के लिए एक html तत्व को यदि तत्व के लिए धक्का दिया है html के माध्यम से यह js फाइल है?

सवाल

सबसे अच्छा जवाब

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में