Question

我一直在调整我的剧本，似乎我已经走到了尽头。我正在尝试学习如何使用Javascript生成表单，似乎每次我认为我已经得到它，我会自信，添加更多，并弄乱一些东西。我无法在代码中发现问题。请，任何帮助将不胜感激。

Javascript：（form.js）

function initFirstLoad(){
    var parentForm = document.getElementsByTagName('form')[0];
    function addForm(){
        var spawnForm = document.createElement("form");
        spawnForm.setAttribute('name',"savefile");
        spawnForm.setAttribute('method',"post");
        spawnForm.setAttribute('action',"");
        document.getElementsByTagName('body')[0].appendChild(spawnForm);
    }
    function addUniqueID(){
        var characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ";
        var stringLength = 10;
        var randomString = '';
        for (var i=0; i<stringLength; i++) {
            var randomNumber = Math.floor(Math.random() * characters.length);
            randomString += characters.substring(randomNumber,randomNumber+1);
        }
        var uniqueID = document.createElement("input");
        uniqueID.setAttribute('type',"text");
        uniqueID.setAttribute('name',"filename");
        uniqueID.setAttribute('readonly',"readonly");
        uniqueID.setAttribute('value',randomString);
        parentForm.appendChild(uniqueID);
    }
    function addWeaponField(){
        var weapsName = document.createElement("input");
        weapsName.setAttribute('type',"text");
        weapsName.setAttribute('name',"textdata[]");

        var weapsNameQt = document.createElement("input");
        weapsNameQt.setAttribute('type',"number");
        weapsNameQt.setAttribute('name',"textdata[]");
        weapsNameQt.setAttribute('value',"0");

        parentForm.appendChild(weapsName);
        parentForm.appendChild(weapsNameQt);
    }
    function addAmmoField(){
        var ammoName = document.createElement("input");
        ammoName.setAttribute('type',"text");
        ammoName.setAttribute('name',"textdata[]");

        var ammoNameQt = document.createElement("input");
        ammoNameQt.setAttribute('type',"number");
        ammoNameQt.setAttribute('name',"textdata[]");
        ammoNameQt.setAttribute('value',"0");

        parentForm.appendChild(ammoName);
        parentForm.appendChild(ammoNameQt);
    }
    function addSubmitButton(){
        var weapsNameSubmit = document.createElement("input");
        weapsNameSubmit.setAttribute('type',"submit");
        weapsNameSubmit.setAttribute('name',"submitsave");
        weapsNameSubmit.setAttribute('value',"Done!");
    }
}
window.addEventListener("load", initFirstLoad);

HTML：（form.htm）

<!DOCTYPE HTML>
<html>
<body style="background-color: rgb(225,225,225)">
    <h3>Javascript Created Form and Fields</h3>
<script type="text/javascript" src="form.js"></script> 
</body>
</html>

我做错了吗？我的语法不正确吗？提前谢谢！

编辑：更正了addSubmitButton，它在我的代码中最初是正确的，但被意外删除了。谢谢你的帮助，问题解决了。我忘了把函数称为函数。

Answer 1

首先，你的代码结构非常奇怪（imo）。如果你正在建立功能以将所有内容保持在一起，那么为什么你不能制作一个适当的基于原型的＆＃34;类＆＃34;代替？这样你就可以重复使用你的代码了。除此之外，你有一个语法错误，你忘了调用你的函数。您还创建了一个提交按钮，但没有将其添加到表单中。事实上，你根本没有在dom中添加表单。这是一个解决您问题的工作演示（但是这个代码必须以更好的方式构建，但这取决于您： - ）：

working jsfiddle demo

function initFirstLoad(){
    addForm();
    var parentForm = document.getElementsByTagName('form')[0];
    addUniqueID();
    addWeaponField();
    addAmmoField();
    addSubmitButton();

    function addForm(){
        var spawnForm = document.createElement("form");
        spawnForm.setAttribute('name',"savefile");
        spawnForm.setAttribute('method',"post");
        spawnForm.setAttribute('action',"");
        document.getElementsByTagName('body')[0].appendChild(spawnForm);
    }
    function addUniqueID(){
        var characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ";
        var stringLength = 10;
        var randomString = '';
        for (var i=0; i<stringLength; i++) {
            var randomNumber = Math.floor(Math.random() * characters.length);
            randomString += characters.substring(randomNumber,randomNumber+1);
        }
        var uniqueID = document.createElement("input");
        uniqueID.setAttribute('type',"text");
        uniqueID.setAttribute('name',"filename");
        uniqueID.setAttribute('readonly',"readonly");
        uniqueID.setAttribute('value',randomString);
        parentForm.appendChild(uniqueID);
    }
    function addWeaponField(){
        var weapsName = document.createElement("input");
        weapsName.setAttribute('type',"text");
        weapsName.setAttribute('name',"textdata[]");

        var weapsNameQt = document.createElement("input");
        weapsNameQt.setAttribute('type',"number");
        weapsNameQt.setAttribute('name',"textdata[]");
        weapsNameQt.setAttribute('value',"0");

        parentForm.appendChild(weapsName);
        parentForm.appendChild(weapsNameQt);
    }
    function addAmmoField(){
        var ammoName = document.createElement("input");
        ammoName.setAttribute('type',"text");
        ammoName.setAttribute('name',"textdata[]");

        var ammoNameQt = document.createElement("input");
        ammoNameQt.setAttribute('type',"number");
        ammoNameQt.setAttribute('name',"textdata[]");
        ammoNameQt.setAttribute('value',"0");

        parentForm.appendChild(ammoName);
        parentForm.appendChild(ammoNameQt);
    }
    function addSubmitButton(){
        var weapsNameSubmit = document.createElement("input");
        weapsNameSubmit.setAttribute('type',"submit");
        weapsNameSubmit.setAttribute('name',"submitsave");
        weapsNameSubmit.setAttribute('value',"Done!");
        parentForm.appendChild(weapsNameSubmit);
    }
}
window.addEventListener("load", initFirstLoad());

Answer 2

不是我如何构建表单而是纠正你的方法......

function initFirstLoad(){
        var spawnForm = document.createElement("form");
        spawnForm.setAttribute('name',"savefile");
        spawnForm.setAttribute('method',"post");
        spawnForm.setAttribute('action',"");
        document.getElementsByTagName('body')[0].appendChild(spawnForm);

        var parentForm = document.getElementsByTagName('form')[0];
        var characters = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ";
        var stringLength = 10;
        var randomString = '';
        for (var i=0; i<stringLength; i++) {
            var randomNumber = Math.floor(Math.random() * characters.length);
            randomString += characters.substring(randomNumber,randomNumber+1);
        }

        var uniqueID = document.createElement("input");
        uniqueID.setAttribute('type',"text");
        uniqueID.setAttribute('name',"filename");
        uniqueID.setAttribute('readonly',"readonly");
        uniqueID.setAttribute('value',randomString);
        parentForm.appendChild(uniqueID);

        var weapsName = document.createElement("input");
        weapsName.setAttribute('type',"text");
        weapsName.setAttribute('name',"textdata[]");

        var weapsNameQt = document.createElement("input");
        weapsNameQt.setAttribute('type',"number");
        weapsNameQt.setAttribute('name',"textdata[]");
        weapsNameQt.setAttribute('value',"0");

        parentForm.appendChild(weapsName);
        parentForm.appendChild(weapsNameQt);


        var ammoName = document.createElement("input");
        ammoName.setAttribute('type',"text");
        ammoName.setAttribute('name',"textdata[]");

        var ammoNameQt = document.createElement("input");
        ammoNameQt.setAttribute('type',"number");
        ammoNameQt.setAttribute('name',"textdata[]");
        ammoNameQt.setAttribute('value',"0");

        parentForm.appendChild(ammoName);
        parentForm.appendChild(ammoNameQt);

        var weapsNameSubmit = document.createElement("input");
        weapsNameSubmit.setAttribute('type',"submit");
        weapsNameSubmit.setAttribute('name',"submitsave");
        weapsNameSubmit.setAttribute('value',"Done!");

}
window.addEventListener("load", initFirstLoad);

Answer 3

你的最后一行是window.addEventListener（“load”，initFirstLoad）;.将其更改为window.addEventListener（“load”，initFirstLoad（））;和'function addSubmitButton {'to'function addSubmitButton（）{'，也许您可能需要在声明父表单后调用函数，如果我没有错误

Javascript创建的表单没有出现在页面上

3 个答案: