javascript - 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 数组中的每个元素创建一个按钮，而是创建一个按钮，而只是将数组的所有内容写入该按钮的值。

有人能帮忙吗？谢谢

标签： javascriptloopscreateelement

Answer 1

我想通了，因为数组的内容已经从服务器以数组形式检索，当我将它推送到 arrayOfFiles 时，它变成了一个嵌套数组。这就是为什么它只制作一个按钮，因为它需要封装数组的 index[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);
    }
}