如何根據可變整數輸入進行動態輸入元素計數？-有解無憂

所以，我并不完全精通 JavaScript，所以請原諒我可能會很容易回答。在 JavaScript 中，而不是 JQuery 中，我正在嘗試創建一個腳本來使用上下 2 個按鈕更改輸入框的值。這樣可行。下一步是獲取值并使用 type="file" 創建多個輸入按鈕。我已經嘗試了多個版本，但我似乎無法讓它正常作業。任何輸入都會有所幫助..

<div id="groupConfig" class="row"></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);
}

// 這是我需要幫助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);
    }
}

uj5u.com熱心網友回復：

您的代碼有兩個問題。

第一個是，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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/444738.html

標籤：javascript 文件目的输入元素

上一篇：在Python中運行API時更新DataFrame

下一篇：從其他物件向物件添加新屬性