动态创建JavaScript并更改值

Question

我尝试进行动态输入，我给出标签属性contentable =“ ture”，因为如果我想其他时间编辑内容，我会在标签中提供属性，并在输入此textContent（label）中添加属性和名称属性。

function addInput() {
  let options = `
      <select class="select1">
          <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 class="input1" type="text">
      <button class="button1">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 class="relative delete dragthing Nlabel" onclick="addvalue()" ><label for="${choose[1]}" contenteditable="true" class="Vlabel" >${choose[1]}</label><span class="removeElement" onclick="removeElement()"><i class="fa-solid fa-circle-xmark"></i></span><input class="Ninput" 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);
    });
  });
}

Answer 1

addValue（）应以一个参数告知它应该处理哪个div。然后，它可以调用该元素上的方法以查找封闭的vlabel和ninput elements。

function addInput() {
  let options = `
      <select class="select1">
          <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 class="input1" type="text">
      <button class="button1">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 class="relative delete dragthing Nlabel" onclick="addvalue(this)" ><label for="${choose[1]}" contenteditable="true" class="Vlabel" >${choose[1]}</label><span class="removeElement" onclick="removeElement()"><i class="fa-solid fa-circle-xmark"></i></span><input class="Ninput" 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>