dynamic create element in javascript and change values

Issue

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

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

Solution

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

Answered By – Barmar

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.