1

JavaScript を使用して動的な HTML 要素を作成するという基本的な理解に何かが欠けていると思います。同様の問題についてオンラインで見つけた多くの例を試した後、質問を投稿することにしました。3 つの入力フォームを動的に作成する JS 関数がありますが、各入力ボックスにラベルを付けたいと考えています。 

function newItem(){
  instance++;

  var oldInput = document.getElementById("itemInfo");
  var parent = oldInput.parentNode;
  var newDiv = document.createElement("div");

  var item = document.createElement("INPUT");
  var qty = document.createElement("INPUT");
  var color = document.createElement("INPUT");

   item.name = "item" + instance;
  item.value = "Enter Item";
  qty.name = "qty" + instance;
  qty.value = "Enter Qty";
  color.name = "color" + instance;
  color.value = "Enter Color";
  newDiv.appendChild(item);
  newDiv.appendChild(qty);
  newDiv.appendChild(color);

  p = qty.parentNode;

  var itemLabel = document.createElement("Label");
    itemLabel.setAttribute("for", item);
    itemLabel.innerHTML = "Item: ";
  newDiv.insertBefore(itemLabel, item);
  var qtyLabel = document.createElement("Label");
    qtyLabel.setAttribute("for", qty);
    qtyLabel.innerHTML = "Qty: ");
  document.body.appendChild(qtyLabel, qty);
   var colorLabel = document.createElement("Label");
     colorLabel.setAttribute("for", color);
     colorLabel.innerHTML = "Color: ");
   color.appendChild(colorLabel);



  parent.insertBefore(newDiv, oldInput);

}

次のようにコメントアウトすると、最初の入力ボックスのみを正しく表示できます。

var itemLabel = document.createElement("Label");
    itemLabel.setAttribute("for", item);
    itemLabel.innerHTML = "Item: ";
  newDiv.insertBefore(itemLabel, item);
  // var qtyLabel = document.createElement("Label");
  //   qtyLabel.setAttribute("for", qty);
  //   qtyLabel.innerHTML = "Qty: ");
  // document.body.appendChild(qtyLabel, qty);
  // var colorLabel = document.createElement("Label");
  //   colorLabel.setAttribute("for", color);
  //   colorLabel.innerHTML = "Color: ");
  // color.appendChild(colorLabel);

ただし、2 番目と 3 番目の入力ボックスにラベルを付けるために下の 2 つのいずれかのコメントを外した場合、newItem() 関数アクションでボタンをクリックしても追加の入力フォームは作成されません。それぞれのラベルを使用してフォームを動的に作成するにはどうすればよいですか?

4

1 に答える 1

5

次の行に構文エラーがあります。

qtyLabel.innerHTML = "Qty: ");
colorLabel.innerHTML = "Color: ");

これに変更するだけです：

qtyLabel.innerHTML = "Qty: ";
colorLabel.innerHTML = "Color: ";

おそらく、このため、コメントすると機能します。

于 2013-07-22T17:33:10.050 に答える