Question

这个html文件是将在“div”中使用“id = form”创建的表单。 vars在html文件中定义

{{1}}

此按钮调用创建表单

的js文件的功能

{{1}}

我有这个Js文件正在创建表单但是当我调用函数“Gerar”时，占位符显示为undefined。此函数创建一个表单，然后使用“Temas”数字创建一个“div”，并在div中创建“fields value”输入元素。

{{1}}

Answer 1

您可以将var parent设置为对全局window的引用。

之后，您需要注意for循环：
您在第一个for内定义
var i = 0
然后在第二个for内，你说：i = document.createElement("input");
现在，当你尝试访问时，parent.types[i]，i isn＆＃39; ta号码了，它现在是一个元素...所以它不起作用...定义另一个变量作为该元素，在下面的例子中我用x

＆＃13;

var parent = window;

var types=['text','number', 'text'];
var fields=3;
var temas =3;
var fieldsM=['um','dois', 'tres'];

function gerar(){ 
  var f = document.createElement("form");
  f.setAttribute('method',"post");
  f.setAttribute('action',"");

  for(var i=0; i < parent.temas; i++){ 
    var div = document.createElement("div");
    div.setAttribute('id', "form"+i);

    for(var j=0; j < parent.fields; j++){ 
      var x = document.createElement("input");
      x.setAttribute('type', parent.types[i]);
      x.setAttribute('placeholder', parent.fieldsM[i]);

      f.appendChild(x);
      div.appendChild(f);
    }
  }
  document.getElementById('form').appendChild(div);
}

＆＃13;

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

＆＃13;

Answer 2

如果要使用对象（例如：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，fields，fieldsM，...）本地＆amp;私有，同时拥有一个全局访问它们的变量（parent）。

如果它还没有成功，你可以尝试一下：

/* 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函数返回指定要创建的<form>元素。然后，您可以根据需要附加表单。

无法获得vars的价值来使用javascript动态创建表单

2 个答案: