dynamic create element in javascript and change values-CodePudding

I try to make dynamic inputs, I give labels attribute contenteditable="ture" because if I want to edit content other time, I give for attribute in label and name attribute in input this textContent(label)

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()" >create input</button>
<div ></div>

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

my problem in this function frist when I create new input and try to change content, for attribute in label and name attribute in input will change to this content but if create input again and try to change content, for attribute in label and name attribute in input will not change to this content so why my function run one time?

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);
    });
  });
}

CodePudding user response：

addvalue() should take an argument telling it which DIV it should process. Then it can call methods on that element to find the enclosed Vlabel and Ninput elements.

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()" >create input</button>
<div ></div>

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