无法获取vars的值以使用javascript动态创建表单_Javascript_Html

无法获取vars的值以使用javascript动态创建表单

javascript html

无法获取vars的值以使用javascript动态创建表单,javascript,html,Javascript,Html,此html文件是将在“div”中创建的表单，其名称为“id=form”。变量在html文件中定义 <body> <script> var types=['text','number', 'text']; var fields=3; var temas =3; var fieldsM=['um','dois', 'tres']; </script> <div id="

此html文件是将在“div”中创建的表单，其名称为“id=form”。变量在html文件中定义

<body>
    <script> 
        var types=['text','number', 'text'];
        var fields=3;
        var temas =3;
        var fieldsM=['um','dois', 'tres'];
    </script>
    <div id="main">


变量类型=['text'、'number'、'text']；
var字段=3；
var-temas=3；
var fieldsM=['um'、'dois'、'tres']；

此按钮调用创建表单的js文件的函数

        <button class="button" onclick="gerar();" id="gerar">Criar Novo</button>
        <div id="form">  
            <!--form here -->
        </div>   
    </div>
</body>

Criar Novo

我有这个Js文件，但是当我调用函数“Gerar”时，占位符看起来没有定义。该函数创建一个表单，然后使用“Temas”的数字创建一个“div”，在该div内创建“fields value”输入元素

function gerar(){ 
    f = document.createElement("form");
    f.setAttribute('method',"post");
    f.setAttribute('action',"");

    for(var i=0;i<parent.temas; i++){ 
        div = document.createElement("div");
        div.setAttribute('id', "form"+i);

        for(var j=0;j<parent.fields;j++){ 
            i = document.createElement("input");
            i.setAttribute('type', parent.types[i]);
            i.setAttribute('placeholder', parent.fieldsM[i]);
            f.appendChild(i);
            div.appendChild(f);
        }
    }
document.getElementById('form').appendChild(div);
}

函数gerar（）{
f=document.createElement（“表单”）；
f、 setAttribute（'method'，'post'）；
f、 setAttribute（'action'，“”）；
对于（var i=0；i如果您想使用对象（例如：parent
）直接访问全局定义的变量（var…
），则有两个选项：
让parent
作为全局对象的引用
var parent = window


让parent
引用全局定义的变量作为属性
var parent = {
    count: fields, // => 3
    $fields: fieldsM, // => ['username', 'email', 'password']
    $types: typesM, // => ['text', 'email', 'password']
    terms: temas /* and so on so forth... */
}


但要确保你的变量是全局的，这样才能起作用
另一方面，我要说的是，更好的做法是让这些变量（temas
，字段
，字段SM
，…）本地和私有，同时让一个全局访问它们的变量（父项
）
如果它仍然不起作用，你可以试试这个：
/* Function to create new <form> element */
function createForm(id) {
    // Create your form manager -- to manage all things form-related,
    // you can also declare this outside the `createForm` function.
    let formManager = {
        fieldCount: 3, // no. of fields
        fields: ['One', 'Two', 'Three'], // the fields` placeholders
        formCount: 3, // no. of forms
        types: ['text', 'number', 'text'] // the fields` types
    },
        // The form
        form = document.createElement('form');

    // Modify the form
    form.action = '';
    arguments.length && (form.id = String(id));
    form.method = 'post';

    // Iterate over the no. of forms
    for (let i = 0; i < formManager.formCount; i += 1) {
        // Make a new <div>
        let div = document.createElement('div');

        // Modify the <div>
        div.id = 'formContainer_' + i;

        // Iterate over the no. of fields
        for (let j = 0; j < formManager.fieldCount; j += 1) {
            // Make a new <input>
            let input = document.createElement('input');

            // Modify the <input>
            input.placeholder = formManager.fields[j];
            input.type = formManager.types[j];

            // Insert the <input> into the <div>
            div.appendChild(input)
        }

        // Insert the <div> into the <form>
        form.appendChild(div)
    }

    // Return your new <form> element
    return form
};

// Make a new form
createForm();

// Make a <form> with ID: `LapysForm`
createForm('LapysForm')

创建新元素的函数*/
函数createForm（id）{
//创建表单管理器--管理所有与表单相关的内容，
//您还可以在“createForm”函数外部声明此函数。
让formManager={
fieldCount:3，//字段数
字段：['1'，'2'，'3']，//字段的占位符
formCount:3，//表格数量
类型：['text'，'number'，'text']//字段的类型
},
//形式
form=document.createElement（'form'）；
//修改表单
form.action=''；
arguments.length&（form.id=String（id））；
form.method='post'；
//迭代表单的数量
for（设i=0；i


createForm
函数返回指定要创建的
元素。然后可以根据需要附加表单。
可以将varparent
设置为全局窗口的引用

之后，您需要注意for
循环：

您可以在第一个中定义

var i=0


然后在下面的第二个for
中，您说：
i=document.createElement（“输入”）；

现在，当您尝试访问，例如，parent.types[i]
，i
不再是一个数字，它现在是一个元素…因此它将不起作用…定义另一个变量作为该元素，在下面的示例中，我使用了x


var parent=window；
变量类型=['text'、'number'、'text']；
var字段=3；
var-temas=3；
var fieldsM=['um'、'dois'、'tres']；
函数gerar（）{
var f=document.createElement（“表单”）；
f、 setAttribute（'method'，'post'）；
f、 setAttribute（'action'，“”）；
对于（var i=0；i

Criar Novo
您使用parent.temas
而不是直接调用temas
的原因是什么？什么是parent.fieldsM[i]
value，当您停止使用该变量时？因为这些变量将被用户提示填充，并且必须在html文件中创建，所以当我调用函数填充这些变量时，该值将存储在那里。“parent.temas”是访问的一种方式them@JPeter该值似乎未定义，但在控制台日志中，当我右键单击parent.fieldsM[i]时，该数组出现correct@LuisLuisMaiaMaia对于编写良好的代码，您可以使用parent.fieldsM.length
来了解（var j=0；jI尝试将变量放在本地，但即使这样，当我将它们称为“占位符”属性和“类型”时，它们仍然显示为未定义。当我有时间仔细查看代码时，我发现了一些逻辑错误，因此我在对我的答案所做的编辑中尝试重新构建您的问题。