Entonces, no soy muy versado en JavaScript, así que perdóname por lo que probablemente será una respuesta fácil. En JavaScript, no en JQuery, estoy tratando de crear un script para cambiar el valor de un cuadro de entrada con 2 botones, arriba y abajo. Eso funciona. El siguiente paso fue tomar el valor y crear múltiples botones de entrada con type="file". He probado varias versiones de esto, pero parece que no puedo hacerlo funcionar correctamente. Cualquier entrada sería útil..
<div id="groupConfig" class="row"></div> <input type="number" class="number" id="groups" value="1" onchange="layersElement()"> <input type="button" value="down" class="button" id="selNumDown" onclick="selDown()"> <input type="button" value="up" class="button" id="selNumUp" onclick="selUp()"><br> <div id="numGroups"></div> const numGroups = document.getElementById("groupConfig"); const numSelected = document.getElementById("groups"); function selUp(){ if((numSelected.value >= 1) && (numSelected.value < 10)) { numSelected.value++; }else{ numSelected.value = 10; } numGroups.appendChild(numSelected); } function selDown(){ if((numSelected.value <= 10) && (numSelected.value > 1)) { numSelected.value--; }else{ numSelected.value = 1; } numGroups.appendChild(numSelected); }// ESTA ES LA PARTE NECESITO AYUDA CON VVV
function layersElement() { let numLayerResult = document.getElementById("groups").value; const numLayers = document.getElementById("numGroups"); for (let x = 1; x <= numLayerResult; x++) { const fileLayerGroups = document.createElement("input"); fileLayerGroups.type = "file"; fileLayerGroups.class = "file"; let idNum; idNum = "Layer" + x; fileLayerGroups.id = idNum; numLayers.appendChild(fileLayerGroups); } }Hubo dos problemas con su código.
La primera fue que la función LayersElement no se invocó al hacer clic en un botón. Y la segunda fue que no eliminó todas las entradas de archivos creadas. Agregué la siguiente línea:
numLayers.innerHTML = ''
Esto borra a todos los niños.
const numGroups = document.getElementById("groupConfig"); const numSelected = document.getElementById("groups"); function selUp(){ if((numSelected.value >= 1) && (numSelected.value < 10)) { numSelected.value++; }else{ numSelected.value = 10; } numGroups.appendChild(numSelected); layersElement() } function selDown(){ if((numSelected.value <= 10) && (numSelected.value > 1)) { numSelected.value--; }else{ numSelected.value = 1; } numGroups.appendChild(numSelected); layersElement() } function layersElement() { let numLayerResult = document.getElementById("groups").value; const numLayers = document.getElementById("numGroups"); //clear all of the file uploads numLayers.innerHTML = '' for (let x = 1; x <= numLayerResult; x++) { const fileLayerGroups = document.createElement("input"); fileLayerGroups.type = "file"; fileLayerGroups.class = "file"; let idNum; idNum = "Layer" + x; fileLayerGroups.id = idNum; numLayers.appendChild(fileLayerGroups); } } <div id="groupConfig" class="row"></div> <input type="number" class="number" id="groups" value="1" onchange="layersElement()"> <input type="button" value="down" class="button" id="selNumDown" onclick="selDown()"> <input type="button" value="up" class="button" id="selNumUp" onclick="selUp()"><br> <div id="numGroups"></div>