javascript - 在 for 循环中创建多个元素

Question

我想使用 javascript 创建几个 html 元素。我有一个工作版本，但代码会重复，我想将它折叠成一个 for 循环。

这里要减少的代码：

function editerPage() {
    var boutonTitre = document.createElement('button');
    boutonTitre.id = 'titre';
    boutonTitre.innerHTML = 'Titre de l\'onglet de la page';
    boutonTitre.setAttribute('onclick', 'titre()');
    var boutonH1 = document.createElement('button');
    boutonH1.id = 'h1';
    boutonH1.innerHTML = 'Titre h1 de la page';
    boutonH1.setAttribute('onclick', 'h1()');
    var boutonP = document.createElement('button');
    boutonP.innerHTML = 'Paragraphe de la page';
    boutonP.id = 'p';
    boutonP.setAttribute('onclick', 'p()');
    var inputCouleurH1 = document.createElement('input');
    inputCouleurH1.innerHTML = 'Changer la couleur du titre h1';
    inputCouleurH1.id = 'input';
    inputCouleurH1.setAttribute('onclick', 'couleurH1()');
    inputCouleurH1.setAttribute('type', 'color');
    document.body.appendChild(boutonTitre);
    document.body.appendChild(boutonH1);
    document.body.appendChild(boutonP);
    document.body.appendChild(inputCouleurH1);
}

在这里我试图减少它，但它不起作用：

var bouton = ['title', 'h1', 'p', 'input']

function editerPage() {
    for ( i = 0; i >= bouton.length; i++ ) {
        bouton[i] = document.createElement('button');
        bouton[i].innerHTML = 'Création du ' + bouton[i];
        bouton[i].id = '"' + bouton[i] + '"';
        bouton[i].setAttribute('onclick', '"' + bouton[i] + '"');
        document.body.appendChild(bouton[i]);
    }
}

有人可以帮助我吗？

标签： javascript

Answer 1

for 循环似乎不正确。你可能想做： for(var i = 0, i < bouton.length; i++) { }

此外，您将创建的元素分配回数组，然后访问它以填充其文本。尝试使用局部变量：

var bouton = ['title', 'h1', 'p', 'input']

function editerPage() {
    for (var i = 0; i < bouton.length; i++ ) {
        var btn = document.createElement('button');
        btn.innerHTML = 'Création du ' + bouton[i];
        btn.id = '"' + bouton[i] + '"';
        btn.setAttribute('onclick', '"' + bouton[i] + '"');
        document.body.appendChild(btn);
    }
}

editerPage()