0

我正在尝试在 javascript 中编写一个函数，该函数会自动将一个按钮添加到来自特定类的某些组件中。

我终于成功编写了以下代码：

<html>
    <head>
    <script type="text/javascript">
        window.onload=function populateEditContainer(){
        //function populateEditContainer(){
            console.log("fonction");
            var editContainers = document.getElementsByClassName("editContainer");
            console.log("collection");
            console.log(editContainers);
            console.log("taille");
            console.log(editContainers.length);
            console.log(editContainers);
            for(var i=0, editContainer; editContainer = editContainers[i]; i++){
                console.log("boucle");
                console.log(editContainer);
                var form = document.createElement("form");
                    console.log(form);
                form.setAttribute('method',"post");
                    console.log(form);
                var button = document.createElement("input");
                    console.log("trace");
                button.setAttribute('type',"button");
                button.setAttribute('value',"editer");
                    console.log(button);
                form.appendChild(button);
                editContainer.appendChild(form);
            }
        }
        console.log("code");
        //window.onload=populateEditContainer();
    </script>
    <title>Configurations</title>
</head>
<body>
    <h1>
        Configuration manager ! 
    </h1>

    <P>Current configuration</P>
    <div style="width:33%">
        <table style="width:100%">
            <tr>
                <td>header reference label</td>
                <td></td>
                <td class="editContainer" />
                </td>
            </tr>
            <tr>
                <td>highlight color</td>
                <td></td>
                <td class="editContainer" />
            </tr>
            <tr>
                <td>account number</td>
                <td></td>
                <td class="editContainer" />
            </tr>
        </table>
    </div>
</body>

但是，在此之前，我遇到了一个我无法理解的问题。

问题： HTMLCollection.length 保持零作为值，但集合似乎已正确填充在调试视图中，因此根本不执行循环。

<html>
    <head>
    <script type="text/javascript">
        //window.onload=function populateEditContainer(){
        function populateEditContainer(){
            console.log("fonction");
            var editContainers = document.getElementsByClassName("editContainer");
            console.log("collection");
            console.log(editContainers);
            console.log("taille");
            console.log(editContainers.length);
            console.log(editContainers);
            for(var i=0, editContainer; editContainer = editContainers[i]; i++){
                console.log("boucle");
                console.log(editContainer);
                var form = document.createElement("form");
                    console.log(form);
                form.setAttribute('method',"post");
                    console.log(form);
                var button = document.createElement("input");
                    console.log("trace");
                button.setAttribute('type',"button");
                button.setAttribute('value',"editer");
                    console.log(button);
                form.appendChild(button);
                editContainer.appendChild(form);
            }
        }
        console.log("code");
        window.onload=populateEditContainer();
    </script>
    <title>Configurations</title>
</head>
<body>
    <h1>
        Configuration manager ! 
    </h1>
    <P>Current configuration</P>
    <div style="width:33%">
        <table style="width:100%">
            <tr>
                <td>header reference label</td>
                <td></td>
                <td class="editContainer" />
            </tr>
            <tr>
                <td>highlight color</td>
                <td></td>
                <td class="editContainer" />
            </tr>
            <tr>
                <td>account number</td>
                <td></td>
                <td class="editContainer" />
            </tr>
        </table>
    </div>
</body>

是否有可能对此进行解释？

4

1 回答 1

0

你有一个错字：

window.onload=populateEditContainer();

这一行实际上是同步执行你的函数。

您只想传递一个引用以稍后在加载时执行：

window.onload=populateEditContainer;

它在上面的示例中起作用的原因是您正在定义和传递函数，但没有执行它。

于 2015-02-25T00:34:27.530 回答