javascript onload函数作用域查询_Javascript_Iteration_Onload_Htmlcollection

javascript onload函数作用域查询

javascript

javascript onload函数作用域查询,javascript,iteration,onload,htmlcollection,Javascript,Iteration,Onload,Htmlcollection,我试图用javascript编写一个函数，该函数将自动向特定类的某些组件中添加一个按钮我终于成功地编写了以下代码： <html> <head> <script type="text/javascript"> window.onload=function populateEditContainer(){ //function populateEditContainer(){ console

我试图用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>


window.onload=函数populateeditcainer（）{
//函数populateEditContainer（）{
控制台日志（“功能”）；
var editContainers=document.getElementsByClassName（“editContainer”）；
控制台日志（“收集”）；
控制台日志（editContainers）；
控制台日志（“taille”）；
console.log（editContainers.length）；
控制台日志（editContainers）；
for（var i=0，editContainer；editContainer=editContainers[i]；i++）{
控制台日志（“boucle”）；
console.log（editContainer）；
var form=document.createElement（“表单”）；
控制台日志（表格）；
form.setAttribute（'method'，'post'）；
控制台日志（表格）；
var按钮=document.createElement（“输入”）；
控制台日志（“跟踪”）；
setAttribute（'type'，'button'）；
setAttribute（'value'，'editer'）；
控制台日志（按钮）；
表单。追加子项（按钮）；
editContainer.appendChild（表单）；
}
}
控制台日志（“代码”）；
//window.onload=populateeditcainer（）；
配置
配置管理器！
 当前配置
标题参考标签
突出显示颜色
帐号

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

问题是：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>


//window.onload=函数populateeditcainer（）{
函数populateEditContainer（）{
控制台日志（“功能”）；
var editContainers=document.getElementsByClassName（“editContainer”）；
控制台日志（“收集”）；
控制台日志（editContainers）；
控制台日志（“taille”）；
console.log（editContainers.length）；
控制台日志（editContainers）；
for（var i=0，editContainer；editContainer=editContainers[i]；i++）{
控制台日志（“boucle”）；
console.log（editContainer）；
var form=document.createElement（“表单”）；
控制台日志（表格）；
form.setAttribute（'method'，'post'）；
控制台日志（表格）；
var按钮=document.createElement（“输入”）；
控制台日志（“跟踪”）；
setAttribute（'type'，'button'）；
setAttribute（'value'，'editer'）；
控制台日志（按钮）；
表单。追加子项（按钮）；
editContainer.appendChild（表单）；
}
}
控制台日志（“代码”）；
window.onload=populateeditcainer（）；
配置
配置管理器！
 当前配置
标题参考标签
突出显示颜色
帐号

有可能对此进行解释吗？

您输入了一个错误：

window.onload=populateEditContainer();

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

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

window.onload=populateEditContainer;

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

非常感谢您的解释。没问题：）如果它解决了您的问题，请随时放弃投票；）