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

有人可以帮我吗？

Answer 1

for循环似乎不正确。您可能想要做： for（var i = 0，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()

Answer 2

Ciao，您可以像这样分解代码：

function editerPage() {
        let attributes = {
           type: ['button', 'button', 'button', 'input'],
           id: ['titre', 'h1', 'p', 'input'],
           html: ['Titre de l\'onglet de la page', 'Titre h1 de la page', 'Paragraphe de la page', 'Changer la couleur du titre h1'],
           click: ['titre()', 'h1()', 'p()', 'couleurH1()']
        };
        for (let i = 0; i < 4; i++ ){
          var element = document.createElement(attributes.type[i]);
          element.id = attributes.id[i];
          element.innerHTML = attributes.html[i];
          element.setAttribute('onclick', attributes.click[i]);
          if (attributes.type[i] === 'input') element.setAttribute('type', 'color');
          document.body.appendChild(element);
        }
    }

Answer 3

您犯了一些错误：

您用创建的按钮元素覆盖bouton [i]并将其设置为innerHTML。为此使用一个新变量。
在for循环中，您使用了i> = bouton.length，因此该循环将永远不会执行，它必须为<。
btn.id只是不带引号的bouton [i]，因为变量已经存储了字符串。
最好将按钮附加到wrapper-div而不是主体。
单击事件必须通过添加带有“ click”作为事件的eventListener和将要完成的功能来完成。我在控制台上仅添加了一条日志，因为我对此没有任何要求。

我扩展了您的按钮阵列。现在，每个条目都是一个对象，其中包含创建此标签的所有信息。您可以轻松添加新属性。如果不是总有必要的话，那就需要测试该属性是否已设置为在新标签上处理该属性之前，就像我使用type ='color'进行操作一样，该属性仅用于输入。

var bouton = [
  {id: 'title', tag: "button"},
  {id:'h1', tag: 'button'},
  {id: 'p', tag: 'button'},
  {id: 'input', tag: 'input', type: 'color', _click: 'couleurH1'}
];

editerPage();

function editerPage() {
    for ( let i = 0; i < bouton.length; i++ ) {
        let btn = document.createElement(bouton[i].tag);
        btn.innerHTML = 'Création du ' + bouton[i].id;
        btn.id = bouton[i].id;
    
        btn.addEventListener('click', function() {
            console.log(btn.id);
        });

        if (btn.type)
            btn.setAttribute('type', bouton[i].type);

        document.getElementById("wrapper").appendChild(btn);
    }
}

<div id="wrapper"></div>

在for循环中创建多个元素

3 个答案: