在javascript中動態創建元素并更改值

我嘗試進行動態輸入，我給標簽屬性 contenteditable="ture" 因為如果我想在其他時間編輯內容，我給標簽中的屬性和輸入這個 textContent(label) 中的 name 屬性

function addInput() {
  let options = `
      <select >
          <option value="">--</option>
          <option value="number">number</option>
          <option value="text">text</option>
          <option value="date">date</option>
          <option value="datetime-local">datetime-local</option>
          <option value="file">file</option>
          <option value="tel">tel</option>
          <option value="time">time</option>
          <option value="url">url</option>
          <option value="month">month</option>
          <option value="range">range</option>
          <option value="color">color</option>
      </select>
      <input  type="text">
      <button >create</button>
      `;

  document.querySelector('.choose').innerHTML = options;
  let button1 = document.querySelector('.button1');
  button1.addEventListener('click', function(e) {
    e.preventDefault
    let select1 = document.querySelector('.select1').value;
    let input1 = document.querySelector('.input1').value;
    let chooses = [
      [select1, input1]
    ];
    chooses.forEach((choose) => {
      if (choose !== " ") {
        let code = `<div  onclick="addvalue()" ><label for="${choose[1]}" contenteditable="true"  >${choose[1]}</label><span  onclick="removeElement()"><i ></i></span><input  name="${choose[1]}"  type=${choose[0]} ></div>`;
        document.querySelector('.Nform').innerHTML  = code;
      }
    });
  });
}

<button onclick="addInput()" class="createElement">create input</button>
<div class="choose"></div>

<div class="Nform" id="dragparent"></div>

當我創建新輸入并嘗試更改內容時，我在此函式中的問題首先出現，標簽中的屬性和輸入中的名稱屬性將更改為此內容，但如果再次創建輸入并嘗試更改內容，標簽中的屬性和名稱中的屬性輸入不會更改為此內容，那么為什么我的函式運行一次？

function addvalue() {
  let values = document.querySelectorAll('.Vlabel');
  console.log(values);
  values.forEach(value => {
    window.addEventListener('click', () => {
      let value2 = document.querySelector('.Vlabel').innerText;
      document.querySelector('.Vlabel').setAttribute('for', value2);
      document.querySelector('.Ninput').setAttribute('name', value2);
    });
  });
}

uj5u.com熱心網友回復：

addvalue()應該接受一個引數來告訴它應該處理哪個 DIV。然后它可以呼叫該元素上的方法來查找封閉的Vlabel和Ninput元素。

function addInput() {
  let options = `
      <select >
          <option value="">--</option>
          <option value="number">number</option>
          <option value="text">text</option>
          <option value="date">date</option>
          <option value="datetime-local">datetime-local</option>
          <option value="file">file</option>
          <option value="tel">tel</option>
          <option value="time">time</option>
          <option value="url">url</option>
          <option value="month">month</option>
          <option value="range">range</option>
          <option value="color">color</option>
      </select>
      <input  type="text">
      <button >create</button>
      `;

  document.querySelector('.choose').innerHTML = options;
  let button1 = document.querySelector('.button1');
  button1.addEventListener('click', function(e) {
    e.preventDefault
    let select1 = document.querySelector('.select1').value;
    let input1 = document.querySelector('.input1').value;
    let chooses = [
      [select1, input1]
    ];
    chooses.forEach((choose) => {
      if (choose !== " ") {
        let code = `<div  onclick="addvalue(this)" ><label for="${choose[1]}" contenteditable="true"  >${choose[1]}</label><span  onclick="removeElement()"><i ></i></span><input  name="${choose[1]}"  type=${choose[0]} ></div>`;
        document.querySelector('.Nform').innerHTML  = code;
      }
    });
  });
}

function addvalue(div) {
  console.log("addvalue");
  let value2 = div.querySelector('.Vlabel').innerText;
  div.querySelector('.Vlabel').setAttribute('for', value2);
  div.querySelector('.Ninput').setAttribute('name', value2);
}

<button onclick="addInput()" class="createElement">create input</button>
<div class="choose"></div>

<div class="Nform" id="dragparent"></div>

標籤：javascript html 动态的

上一篇：使用MUI中的Switch在useState之間切換

下一篇：JavaScriptkeyup事件監聽器在iPhone上不起作用