How do you make dynamic input element count based on variable integer input?-CodePudding

So, I am not all to versed in JavaScript so forgive me for what will probably be an easy answer. In JavaScript, not JQuery, I am trying to create a script to change an input boxes value with 2 buttons, up and down. That, works. The next step was to take the value and create multiple input buttons with the type="file". I have tried multiple versions of this but i cant seem to get it working right. Any input would be helpful..

<div id="groupConfig" ></div>
<input type="number"  id="groups" value="1" onchange="layersElement()">
<input type="button" value="down"  id="selNumDown" onclick="selDown()">
<input type="button" value="up"  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);
}

// THIS IS THE PART I NEED HELP WITH 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);
    }
}

CodePudding user response：

There were two problems with your code.

The first one was, that the layersElement function was not called on the click of a button. And the second one was that you didnt remove all of the created file inputs. I added the following line:

numLayers.innerHTML = ''

This clears all of the children.

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" ></div>
<input type="number"  id="groups" value="1" onchange="layersElement()">
<input type="button" value="down"  id="selNumDown" onclick="selDown()">
<input type="button" value="up"  id="selNumUp" onclick="selUp()"><br>

<div id="numGroups"></div>