function updateItems() {
  const data = {
  ItemNames: []
  };
  var ItemCount = document.getElementById("selectQty").value;
  for (var i = 1; i <= ItemCount; i++){
    data.ItemLists.push({
      id: `ItemName${i}`,
      value: document.getElementById(`ItemName${i}`).value
    });
  }
}

Arriba está mi código, estoy tratando de crear un nuevo texto de entrada llamado id = "ItemName" para crear en función del valor en el cuadro combinado de selección llamado id = "selectQty". Creé este bucle pero no crea un nuevo texto de entrada basado en el número seleccionado en el cuadro combinado. Soy principiante en Javascript y hago ejercicios. Intenté buscar otra solución, pero parece que no puedo encontrar ninguna. Se agradecerá cualquier ayuda.

Esta función se llamará mediante la selección:

<select id="selectQty" onchange="updateItems()">
  <option value="0" disabled selected value>Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="2">3</option>
  <option value="2">4</option>
  <option value="2">5</option>
  <option value="2">6</option>
  <option value="2">7</option>
</select>

Este es mi texto de entrada

<input type="text" id="ItemName" placeholder="Item Name">
2
stewieranger124 22 ago. 2020 a las 10:45

1 respuesta

La mejor respuesta

Debe utilizar el método createElement para crear nuevos elementos dinámicamente entradas añadidas.

Para obtener el valor de la entrada real que necesitamos crear, podemos usar _this.value que vendrá de nuestra función onclick.

Es posible que observe este signo +, lo que significa que estamos convirtiendo el número string al formato integer real para fines de bucle.

Además, también he agregado label a cada una de sus entradas cuando se crean, puede nombrar el label a lo que suits es el mejor para usted.

Además, para que se vea mejor, podemos agregar un salto de línea <br> para asegurarnos de que nuestras etiquetas y entradas se generen en la línea each.

Por último, debe utilizar innerHTML para asegurarse que configura el results para que se vacíe cada vez que select un option diferente del seleccionado.

También puede hacer referencia a cada comment que he agregado en cada línea del código JS a continuación.

Demostración en vivo:

function updateItems(_this) {
  var ItemCount = +_this.value //get the value
  var results = document.querySelector('#results') //append results
  results.innerHTML = '' //clear the results on each update
  for (var i = 1; i <= ItemCount; i++) {
    var input = document.createElement('input') //create input
    var label = document.createElement("label"); //create label
    label.innerText = 'Input ' + i
    input.type = "text";
    input.placeholder = "Type text here"; //add a placeholder
    input.className = "my-inputs"; // set the CSS class
    results.appendChild(label); //append label
    results.appendChild(document.createElement("br"));
    results.appendChild(input); //append input
    results.appendChild(document.createElement("br"));
  }
}
<select id="membership-members" onchange="updateItems(this)">
  <option value="0" disabled selected>Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
</select>
<br>
<br>
<div id="results"></div>
1
Always Helping 22 ago. 2020 a las 08:29