Javascript、オブジェクトの配列からフォームを作成

配列からオブジェクトを読み込み、フォームに配置しようとしています。私はJavascriptを初めて使っています。なぜこれが機能しないのか理解するのは苦労しています。私は助けをオンラインで見ようとしましたが、これまでに何も見つかりませんでした。ここでJavascript、オブジェクトの配列からフォームを作成

は、これまでの私のコードです：

 var arr = [ 
 
      {Section: 1, Max: 20}, 
 
      {Section: 2, Max: 30}, 
 
      {Section: 3, Max: 50} 
 
     ]; 
 

 
     var length = arr.length; 
 

 
     function createForm() { 
 
      for (i = 0; i <= length; i++) { 
 
       form = document.getElementById("formed"); 
 
       var x = arr.Section[i]; 
 
       var y = arr.Max[i]; 
 
       form.appendChild(x); 
 
       form.appendChild(y); 
 

 
      } 
 

 
     }

<head> 
 
    <meta charset="utf-8"> 
 
</head> 
 
<body onload="createForm();"> 
 
<form id="formed"> 
 
</form> 
 
</body>

出典

2017-02-14 NLee57

あなたのコードは、フォームに追加する任意のHTML要素を生成しません。 '.appendChild（）'は、追加するHTML要素が必要です。データを挿入する場合は、挿入する要素が必要です。 –

あなたが好きな、アレイ上ではなく、オブジェクトの属性にインデックスiを使用する必要があります。

var x = arr[i].Section; 
var y = arr[i].Max;

の代わりに：

var x = arr.Section[i]; 
var y = arr.Max[i];

希望します。オブジェクトの値x/yでinput年代を生成

サンプルスニペット：

var arr = [ 
 
    {Section: 1, Max: 20}, 
 
    {Section: 2, Max: 30}, 
 
    {Section: 3, Max: 50} 
 
]; 
 

 
var length = arr.length; 
 

 
function createForm(){ 
 
    for (i in arr) { 
 
    form = document.getElementById("formed"); 
 

 
    var x = arr[i].Section; 
 
    var y = arr[i].Max; 
 

 
    var input = document.createElement('input'); 
 
    input.setAttribute('value', x+' -- '+y) 
 

 
    form.appendChild(input); 
 
    } 
 
}

<body onload="createForm();"> 
 
    <form id="formed"></form> 
 
</body>

出典

2017-02-14 16:41:05

これは実際にフォームに子要素を追加することはありません。 –

はい、HTMLの生成がないため、主な問題はそれらのインデックスから発生します。私はちょうどアイデアを与えるためにサンプルを追加しました.. –

ありがとう！私はどこに間違っていたのか理解しています。私は本当にこれを働かせるために苦労していた。 – NLee57

私はあなたが何をしたいのかを理解することはできませんが、呼び出したい場合x要素を配列に追加する必要があります。

var array = ["mario","luca","paolo"]; 
print(array[0]); //will print "mario"

する必要があります：

arr[i].Section;

出典

2017-02-14 16:44:41

あなたのコードには複数の問題があります。 forループ内

1.条件：ループの中条件は、そうでなければ、配列の長さに達し、未定義のでしょうforループfor (i = 0; i <= length; i++) {が条件i <lengthまで実行されている必要がありますが正しくありません。

2.配列要素へのアクセス：インデックスを使用して配列にアクセスする必要があります。だからDOMに

var x = arr.Section[i]; var y = arr.Max[i];

var x = arr[i].Section; var y = arr[i].Max;

に3.Appendingノードに変更する必要がありますが、以下：あなたが唯一のDOMにNode要素を追加することができます。だから、あなたは直接form.appendChild(x);を書き込むことはできませんが、代わりにあなたはとてもdocument.createTextNode(x)

ようdocumentオブジェクトのメソッドによりTextNodeようNodeオブジェクトを作成する必要があり、

に変更

form.appendChild(x); form.appendChild(y);

var textnodex = document.createTextNode(x); var textnodey = document.createTextNode(y); form.appendChild(textnodex); form.appendChild(textnodey);

は、以下の同時ですmplete作業バージョンは

var arr = [ {Section: 1, Max: 20}, {Section: 2, Max: 30}, {Section: 3, Max: 50} ]; var length = arr.length; function createForm() { for (i = 0; i < length; i++) { var form = document.getElementById("formed"); var x = arr[i].Section; var y = arr[i].Max; var textnodex = document.createTextNode(x); var textnodey = document.createTextNode(y); form.appendChild(textnodex); form.appendChild(textnodey); } }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <body onload="createForm();"> <form id="formed"> </form> </body> </html>

出典

2017-02-14 16:55:14 Agalo

Javascript、オブジェクトの配列からフォームを作成

答えて

関連する問題