如何根据可变整数输入进行动态输入元素计数？

Question

所以，我并不完全精通 JavaScript 所以请原谅我的回答可能很简单。在 JavaScript 而不是 JQuery 中，我正在尝试创建一个脚本来使用上下两个按钮来更改输入框的值。这样可行。下一步是获取该值并创建多个类型为“文件”的输入按钮。我已经尝试了多个版本，但似乎无法正常工作。任何输入都会有所帮助..

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

// 这是我需要帮助的部分 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);
    }
}

Answer 1

您的代码有两个问题。

第一个是，单击按钮时未调用 layersElement 函数。第二个是您没有删除所有创建的文件输入。我添加了以下行：

numLayers.innerHTML = ''

这将清除所有子项。

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>

如何根据可变整数输入进行动态输入元素计数？

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

javascript

element

file

input

object