for循环不能正确地制作多个按钮

Question

所以，我想用for循环来制作多个按钮，如

    const buttonSection = document.getElementById('listOfFiles');
    for (let i = 0; i < arrayOfFiles.length; i++){
        const questionnaireSelector = document.createElement('input');
        questionnaireSelector.type = 'button';
        questionnaireSelector.id = 'selectorButton' + i;
        questionnaireSelector.value = arrayOfFiles[i];
        buttonSection.appendChild(questionnaireSelector);

而不是为前面代码中填充的arrayOfFiles数组中的每个元素制作一个按钮，而是制作一个按钮，并将数组中的所有内容写入该按钮的值中。

有谁能帮忙吗，谢谢

Answer 1

我已经添加了必要的缺失元素。你应该替换它们。

HTML:

<div id='listOfFiles'></div>

JS。

    const buttonSection = document.getElementById('listOfFiles');
    const arrayOfFiles = [1,2,3,4] // to be replaced

    for (let i = 0; i < arrayOfFiles.length; i++){
        const questionnaireSelector = document.createElement('input');
        questionnaireSelector.type = 'button';
        questionnaireSelector.id = 'selectorButton' + i;
        questionnaireSelector.value = arrayOfFiles[i];
        buttonSection.appendChild(questionnaireSelector);
    }

看它在行动

Answer 2

我想明白了，因为数组的内容已经以数组形式从服务器上获取，当我把它推到arrayOfFiles时，它就变成了一个嵌套数组。这就是为什么它只做了一个按钮，因为它取的是封装数组的索引[0]。完整的代码:

"use strict";

const arrayOfFiles = [];


async function getListFromServer(){
    const response = await fetch('/api/viewQuestionnaires');
    const directory = await response.json();

    arrayOfFiles.push(directory);
}

function displayListOfFiles(){
    revealButton.remove();
    const buttonSection = document.getElementById('listOfFiles');
    for (let i = 0; i < arrayOfFiles.length; i++){
        let questionnaireSelector = document.createElement('input');
        questionnaireSelector.type = 'button';
        questionnaireSelector.id = 'selectorButton' + i;
        questionnaireSelector.value = arrayOfFiles[i];
        buttonSection.appendChild(questionnaireSelector);
    }
}