는 방법을 매개 변 html 요소는 경우 요소가 밀려 html 이를 통해 js 파일입니까?

Question 1

나는 밀 <form> HTML 파일 JS 에서 파일,다음 매개 변 이 양식을 하지만 오류를 밝혀: Catch 되지 않는 형식 오류:읽을 수 없는 속성의 null(독서'매개 변').

나는 가정이기 때문에 이 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

당신을 사용할 필요가 이벤트 위임을 상기 수신기를 연결하는 부모는 구성요소에서 이벤트를 캡처하위 요소로 그들은"거하고"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>

안녕 디! 를 도와 주셔서 감사합니 나에게,거기에는 이벤트 대표단이 정말로 작동합니다!!
NP 디! 죄송에 대한 응답을 늦게 asI 이 새로운 웹사이트 그러므로 나는 익숙하지 않은 모든 기능

는 방법을 매개 변 html 요소는 경우 요소가 밀려 html 이를 통해 js 파일입니까?

질문

최고의 응답

다른 언어로

이 페이지는 다른 언어로되어 있습니다

이 카테고리에서 인기

인기 있는 질문에 이 카테고리