JSFiddle - React, Tailwind, and code Playground

by kasperfish

HTML

<h3>Javascript Created Form and Fields</h3>

CSS

input{
    display:block;
    margin-top:10px;
}

JavaScript

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");
       ...