0

コードへのリンク (js と css はページ ソースから見つけることができます): https://dl.dropboxusercontent.com/u/16952797/webdev/uppg1/kontakt.html alt リンク: http://jsfiddle.net/DdQhk/ (ただし、jsfiddle はページを適切にレンダリングしません)

関連するコード行 (関数 createFormBug() - kontakt.js の 31 ～ 66 行目) コード:

function createFormBug() {
    var form = document.createElement("form");
    var fieldset = document.createElement("fieldset");
    var legend = document.createElement("legend");
    var labelFunction = document.createElement("label");
    var labelInterface = document.createElement("label");
    var labelComment = document.createElement("label");
    var radioFunction = document.createElement("input");
    radioFunction.type = "radio";
    var radioInterface = document.createElement("input");
    radioInterface.type = "radio";
    var textarea = document.createElement("textarea");
    var buttonSubmit = document.createElement("input");
    radioInterface.type = "submit";

    form.id = "formBug";

    legend.textContent = "Bugg";

    document.getElementById("divForm").appendChild(form);

    form.appendChild(fieldset);
    fieldset.appendChild(legend);
    fieldset.appendChild(labelFunction);
    fieldset.appendChild(radioFunction);
    fieldset.appendChild(labelInterface);
    fieldset.appendChild(radioInterface);
    fieldset.appendChild(labelComment);
    fieldset.appendChild(textarea);
    fieldset.appendChild(buttonSubmit);





}

context: js を使用して動的にフォームを作成しようとしていますが、残念ながらいくつかの要素が何らかの理由で追加されていません。

Chrome で実行したときに生成された html の部分的な出力 (関連セクション):

<div id="divForm">
    <form id="formBug">
        <fieldset>
            <legend>Bugg</legend>
            <label></label>
            <input type="radio">
            <label></label>
            <input type="submit">
            <label></label>
            <textarea></textarea>
            <input>
        </fieldset>
    </form>
</div>
4

1 に答える 1

1

あなたのコードは、期待どおりに機能していると思います。唯一の明らかな間違いは、radioInterface.type = "submit";おそらく意味する場所を設定していることですbuttonSubmit.type = "submit";。

実際に表示されるような要素を作成するために実際にコンテンツを配置すると、これがうまく機能することは明らかですlabel...

もしかして、こういうこと？

var form = document.createElement("form");
var fieldset = document.createElement("fieldset");
var legend = document.createElement("legend");

var labelFunction = document.createElement("label");
labelFunction.textContent = 'Function'; // <-- added
var labelInterface = document.createElement("label");
labelInterface.textContent = 'Interface'; // <-- added
var labelComment = document.createElement("label");
labelComment.textContent = 'Comment'; // <-- added

var radioFunction = document.createElement("input");
radioFunction.type = "radio";
var radioInterface = document.createElement("input");
radioInterface.type = "radio";

var textarea = document.createElement("textarea");

var buttonSubmit = document.createElement("input");
buttonSubmit.type = "submit"; // <-- corrected

それらを実際にドキュメントに追加するコードは正常に機能するはずです。

于 2013-11-06T13:41:22.543 に答える