dynamic create element in javascript and change values

Question

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

Every time you call addValue() you're adding another window click listener, and all of them will run every time you click. — Barmar
– Barmar, Commented May 18, 2022 at 21:06
document.querySelector('.Vlabel') always selects the first Vlabel in the document, not anything related to the current element of the forEach loop. — Barmar
– Barmar, Commented May 18, 2022 at 21:10

Barmar · Accepted Answer · 2022-05-18 21:19:18Z

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>

okey so this used to select this element that i want to change it , thank you :)

Collectives™ on Stack Overflow

dynamic create element in javascript and change values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related