I hope someone will help me to solve this little problem with javascript. I did create a javascript function to render automatically 2 different forms according to the value selected by the user from a selectbox. The function is triggered when the user click on a button. The problem is that the forms are not generated instead i'm getting an error message: "Uncaught ReferenceError: addFields is not defined".
Html Code:
<div class="form-group " style="margin-left: 80%">
<div class="col-sm-10">
<button type="button" class="btn btn-success btn-lg" onclick="addFields()">Formular erstellen</button>
</div>
</div>
Javascript code:
<script type="text/javascript">
function addFields() {
// Number of inputs to create
var number = document.getElementById("anzahlFragen").value;
// Type of Quiz
var type = document.getElementById("quizTyp");
var selectedType = type.options[type.selectedIndex].text;
// Container <div> where dynamic content will be placed
var myContainer = document.getElementById("myContainer");
// Clear previous contents of the container
while (myContainer.hasChildNodes()) {
myContainer.removeChild(myContainer.lastChild);
}
if (selectedType === "Multiple choices") {
for (i = 1; i <= number; i++) {
var div1 = document.createElement("div");
div1.className = "form-group";
var div2 = document.createElement("div");
div2.className = "col-sm-9";
var labelFr = document.createElement("label");
var tFr = document.createTextNode("Frage Nr " + i);
labelFr.appendChild(tFr);
labelFr.className = "col-sm-2 control-label";
div1.appendChild(labelFr);
var inputFr = document.createElement("input");
inputFr.type = "text";
inputFr.name = "frage" + i;
inputFr.className = "form-control round-form";
div2.appendChild(inputFr);
div2.appendChild(document.createElement("br"));
for (j = 1; j <= 4; j++) {
var labelAn = document.createElement("label");
var tAn = document.createTextNode("Antwort Nr " + i + j);
labelAn.appendChild(tAn);
div2.appendChild(labelAn);
var inputAn = document.createElement("input");
inputAn.type = "text";
inputAn.name = "antwort" + i + j;
inputAn.className = "form-control round-form";
div2.appendChild(inputAn);
var labelRichtig = document.createElement("label");
var tRichtig = document.createTextNode("Richtig " + i + j);
labelRichtig.appendChild(tRichtig);
div2.appendChild(labelRichtig);
var richtigAn = document.createElement("input");
richtigAn.type = "radio";
richtigAn.name = "Richtig" + i;
div2.appendChild(richtigAn);
div2.appendChild(document.createElement("br"));
div2.appendChild(document.createElement("br"));
}
div1.appendChild(div2);
myContainer.appendChild(div1);
myContainer.appendChild(document.createElement("br"));
}
} else {
for (i = 1; i <= number; i++) {
var div1 = document.createElement("div");
div1.className = "form-group";
var div2 = document.createElement("div");
div2.className = "col-sm-9";
var labelFr = document.createElement("label");
var tFr = document.createTextNode("Frage Nr " + i);
labelFr.appendChild(tFr);
labelFr.className = "col-sm-2 control-label";
div1.appendChild(labelFr);
var inputFr = document.createElement("input");
inputFr.type = "text";
inputFr.name = "frage" + i;
inputFr.className = "form-control round-form";
div2.appendChild(inputFr);
div2.appendChild(document.createElement("br"));
for (j = 1; j <= 4; j++) {
var labelAn = document.createElement("label");
var tAn = document.createTextNode("Antwort Nr " + i + j);
labelAn.appendChild(tAn);
div2.appendChild(labelAn);
var inputAn = document.createElement("input");
inputAn.type = "text";
inputAn.name = "antwort" + i + j;
inputAn.className = "form-control round-form";
div2.appendChild(inputAn);
var profilAn = document.createElement("select");
profilAn.name = "profil" + i + j;
div2.appendChild(profilAn);
optionAn1 = document.createElement("option");
optionAn1.setAttribute("value", "1"),
var optionT1 = document.createTextNode("Profil 1");
optionAn1.appendChild(optionT1);
optionAn2 = document.createElement("option");
optionAn2.setAttribute("value", "2"),
var optionT2 = document.createTextNode("Profil 2");
optionAn2.appendChild(optionT2);
optionAn3 = document.createElement("option");
optionAn3.setAttribute("value", "3"),
var optionT3 = document.createTextNode("Profil 3");
optionAn3.appendChild(optionT3);
optionAn4 = document.createElement("option");
optionAn4.setAttribute("value", "4"),
var optionT4 = document.createTextNode("Profil 4");
optionAn4.appendChild(optionT4);
document.getElementsByTagName("select").appendChild(optionAn1);
document.getElementsByTagName("select").appendChild(optionAn2);
document.getElementsByTagName("select").appendChild(optionAn3);
document.getElementsByTagName("select").appendChild(optionAn4);
div2.appendChild(document.createElement("br"));
div2.appendChild(document.createElement("br"));
}
div1.appendChild(div2);
myContainer.appendChild(div1);
myContainer.appendChild(document.createElement("br"));
}
}
}
</script>
You have placed commas instead of semicolon at the end of the lines above the declaration of the variables optionT1, optionT2, optionT3and optionT4.
Related
I have an html table that I am creating dynamically its populating everything Accept select element I tried all the methods but its not working please have a look.
My complete code for table:-
function getreferData(dataArray) {
let selectArray = ["Intvw Scheduled", "Selected", "Rejected", "On Hold"];
var ray = dataArray.splice(0, 1)
let table = document.getElementById('thead1');
var tableHeaderRow = document.createElement("tr");
table.appendChild(tableHeaderRow);
for (i = 0; i < ray[0].length; i++) {
var tableHeader = document.createElement("th");
tableHeaderRow.appendChild(tableHeader);
tableHeader.innerHTML = ray[0][i];
}
let tbody = document.getElementById('perf');
for (var i = 0; i < dataArray.length; i++) {
let row = document.createElement("tr")
for (var j = 0; j < dataArray[i].length; j++) {
if (j == 4) {
let col = document.createElement("td")
var a = document.createElement("a");
a.setAttribute("class", "light-blue-text text-light-blue")
a.href = dataArray[i][j];
var node = document.createTextNode("Click here")
a.appendChild(node)
col.appendChild(a)
row.appendChild(col)
} else if (j == 6) {
var col = document.createElement("td");
col.appendChild(createDropdown("status-" + dataArray[i]));
var lbl = document.createElement("label");
lbl.setAttribute("for", "status-" + dataArray[i]);
col.appendChild(lbl)
row.appendChild(col)
} else if (j == 7) {
let col = document.createElement("td")
var a2 = document.createElement("a");
a2.setAttribute("class", "btn blue-grey darken-3 waves-effect waves-light");
a2.setAttribute("onclick", "editrefrecord(\"" + dataArray[i] + "\")");
a2.setAttribute("style", "color: white");
var node2 = document.createTextNode("UPDATE");
a2.appendChild(node2);
col.appendChild(a2);
row.appendChild(col)
} else {
let col = document.createElement("td")
col.innerText = dataArray[i][j]
row.appendChild(col)
}
}
tbody.appendChild(row);
}
function createDropdown(id) {
//create a radio button
var fragment = document.createDocumentFragment();
var select = document.createElement('select');
select.setAttribute("id", id);
selectArray.forEach(function (r) {
select.options.add(new Option(r, r));
});
fragment.appendChild(select);
return fragment;
}
}
The only thing you would like to focus is:-
let selectArray = ["Intvw Scheduled", "Selected", "Rejected", "On Hold"];
else if (j == 6) {
var col = document.createElement("td");
col.appendChild(createDropdown("status-" + dataArray[i]));
var lbl = document.createElement("label");
lbl.setAttribute("for", "status-" + dataArray[i]);
col.appendChild(lbl)
row.appendChild(col)
}
and the function to create select element :-
function createDropdown(id) {
//create a radio button
var fragment = document.createDocumentFragment();
var select = document.createElement('select');
select.setAttribute("id", id);
selectArray.forEach(function (r) {
select.options.add(new Option(r, r));
});
fragment.appendChild(select);
return fragment;
}
Currently My Html table looks like this and If you will see Status is not populating select option:-
The Inspect Element shows its created but its invisible:-
You Missed adding options
let selectArray = ["Intvw Scheduled", "Selected", "Rejected", "On Hold"];
var selectList = document.createElement("select");
selectList.id = "mySelect";
myParent.appendChild(selectList);
//Create and append the options
for (var i = 0; i < selectArray.length; i++) {
var option = document.createElement("option");
option.value = selectArray[i];
option.text = selectArray[i];
selectList.appendChild(option);
}
So I have this HTML Code/Javascript,
var spellNumber = 0;
function createSpell() {
var spellOption = document.createElement("option");
var spellOption2 = document.createElement("option");
var spellSelect = document.createElement("select");
var spellLabel = document.createElement("label");
var spellEnvelope = document.createElement("p");
spellOption.innerHTML = 'Vanish';
spellOption.setAttribute('value', 'vanish');
spellOption2.innerHTML = 'Teleport';
spellOption2.setAttribute('value', 'teleport');
spellSelect.setAttribute('id', 'spell');
spellSelect.setAttribute('name', 'spell');
spellLabel.setAttribute('for', 'spell');
spellLabel.innerHTML = '<strong>Spell ' + (spellNumber + 1) + '</strong> = ';
spellEnvelope.appendChild(spellLabel);
spellEnvelope.appendChild(spellSelect);
spellSelect.appendChild(spellOption);
spellSelect.appendChild(spellOption2);
document.getElementById("spells").appendChild(spellEnvelope);
spellNumber += 1;
}
createSpell()
function generateYaml() {
var spellCheck = 1;
for (allSpells = 0; allSpells < spellNumber; allSpells++) {
var multipleSpell = $("#spell:contains('Spell " + spellCheck + "')").val();
console.log(multipleSpell);
spellCheck++
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="spells"></div>
<button onClick="createSpell()">Add A Spell</button>
<button id="button" onClick="generateYaml()">Make the Magic Happen</button>
And am trying to retrieve the .value of the <select id="spell"> options. However, the console returns an undefined, instead of vanish or teleport.
Can anyone point me in the right direction for this?
Well:
Id should be unique so I added spellSelect.setAttribute('id', 'spell' + spellNumber); ( + other rows)
Also multipleSpell = $("#spell" + spellCheck).val();
And console.log(multipleSpell); is called only once at the begining -> you should change it to function too
`
var spellNumber = 0;
function createSpell() {
var spellOption = document.createElement("option");
var spellOption2 = document.createElement("option");
var spellSelect = document.createElement("select");
var spellLabel = document.createElement("label");
var spellEnvelope = document.createElement("p");
spellOption.innerHTML = 'Vanish';
spellOption.setAttribute('value', 'vanish');
spellOption2.innerHTML = 'Teleport';
spellOption2.setAttribute('value', 'teleport');
spellSelect.setAttribute('id', 'spell' + spellNumber);
spellSelect.setAttribute('name', 'spell' + spellNumber);
spellLabel.setAttribute('for', 'spell' + spellNumber);
spellLabel.innerHTML = '<strong>Spell ' + (spellNumber + 1) + '</strong> = ';
spellEnvelope.appendChild(spellLabel);
spellEnvelope.appendChild(spellSelect);
spellSelect.appendChild(spellOption);
spellSelect.appendChild(spellOption2);
document.getElementById("spells").appendChild(spellEnvelope);
spellNumber += 1;
}
createSpell()
function generateYaml() {
var spellCheck = 0;
for (allSpells = 0; allSpells < spellNumber; allSpells++) {
var multipleSpell = $("#spell" + spellCheck).val();
console.log(multipleSpell);
spellCheck++
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="spells"></div>
<button onClick="createSpell()">Add A Spell</button>
<button id="button" onClick="generateYaml()">Make the Magic Happen</button>
var multipleSpell = $("#spell:contains('Spell " + spellCheck + "')").val();
More info here.
Edited:
Well, i see you are trying to get all select values. Why not try this?
function generateYaml() {
var spellCheck = 1;
var selects = $("select").each(function (index, element) {
var value = $(element).val()
console.log("The value at index %d is %s", index, value);
spellCheck++
});
}
This way you iterate over all the selects, and get their values inside the loop. Try it here (open the developer console):https://darkcyanpointlessbooleanvalue--parzibyte.repl.co/
i have a add button in my jsp. while clicking on the add button, it will add a complete row which will include the checkbox, serial no, textbox and a drop down list with options.
i can able to add checkbox and text box but i am not able to add the serial no column(which is increasing the serial no by 1) and the drop down list options to the select through javaScript.
As the eleements are adding the ids dynamically i am not able to get the element by its id to check.
var i=1;
function addRow(tableID)
{
var tbl = document.getElementById(tableID);
var lastRow = tbl.rows.length;
var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
var firstCell = row.insertCell(0);
//adding the checkbox
var el1 = document.createElement('input');
el1.type = 'checkbox';
el1.name = 'chkbox_' + i;
el1.id = 'chkbox_' + i;
el1.align = 'center';
//el1.size = 15;
el1.maxlength = 20;
firstCell.appendChild(el1);
var secondCell = row.insertCell(1);
//adding the serial no
var el2 = document.createElement('input');
el2.type = 'style';
el2.name = 'style_' + i;
el2.id = 'style_' + i;
//el1.size = 15;
el2.maxlength = 20;
secondCell.appendChild(el2);
var thirdCell = row.insertCell(2);
//adding the textbox
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'txtbox_' + i;
el3.id = 'txtbox_' + i;
el3.size = 15;
el3.maxlength = 20;
thirdCell.appendChild(el3);
var forthCell = row.insertCell(3);
//adding the option
var el4 = document.createElement('select');
el4.type = 'select-one';
el4.name = 'select_' + i;
el4.id = 'select_' + i;
el4.value = "1";
//el4.size = 15;
el4.maxlength = 20;
var select = document.getElementById("select_2");
select.options[select.options.length] = new Option('Value1', 'Value2','Value3');
forthCell.appendChild(el4);
el4.appendChild(option);
// alert(i);
i++;
frm.h.value=i;
// alert(i);
}
</script>
please help me to get the solution. i tried with possibilities but never get a solution what i need.Thanks in advance.
You've missed setting the value of Serial Number.
var el2 = document.createElement('input');
el2.type = 'style';
el2.name = 'style_' + i;
el2.id = 'style_' + i;
el2.value = i;
Also, You have to set options to select something like below
var el4 = document.createElement('select');
var opt = document.createElement('option');
opt.value = "Value1";
opt.innerHTML = "Value1";
el4.appendChild(opt);
window.onload = function()
{
addRow("test");
}
var i=1;
function addRow(tableID)
{
var tbl = document.getElementById(tableID);
var lastRow = tbl.rows.length;
var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
var firstCell = row.insertCell(0);
//adding the checkbox
var el1 = document.createElement('input');
el1.type = 'checkbox';
el1.name = 'chkbox_' + i;
el1.id = 'chkbox_' + i;
el1.align = 'center';
//el1.size = 15;
el1.maxlength = 20;
firstCell.appendChild(el1);
var secondCell = row.insertCell(1);
//adding the serial no
var el2 = document.createElement('input');
el2.type = 'style';
el2.name = 'style_' + i;
el2.id = 'style_' + i;
//el1.size = 15;
el2.value = i;
el2.maxlength = 20;
secondCell.appendChild(el2);
var thirdCell = row.insertCell(2);
//adding the textbox
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'txtbox_' + i;
el3.id = 'txtbox_' + i;
el3.size = 15;
el3.maxlength = 20;
thirdCell.appendChild(el3);
var forthCell = row.insertCell(3);
//adding the option
var el4 = document.createElement('select');
el4.type = 'select-one';
el4.name = 'select_' + i;
el4.id = 'select_' + i;
el4.value = "1";
//el4.size = 15;
el4.maxlength = 20;
var opt = document.createElement('option');
opt.value = "Value1";
opt.innerHTML = "Value1";
el4.appendChild(opt);
//var select = document.getElementById("select_2");
//select.options[select.options.length] = new Option('Value1', 'Value2','Value3');
forthCell.appendChild(el4);
//el4.appendChild(option);
// alert(i);
i++;
//frm.h.value=i;
// alert(i);
}
</script>
<input type="button" value="Add Row" onclick='addRow("test")' />
<table id="test"></table>
I Have created a modal inside the listview having input fields and select element. This list is shown up in webview of android. When I am clicking the input field, I am able to change the value inside it but when I am clicking the select field nothing happens even though I have the data inside that select list and even it is focussed by click listener. Can anyone please help me with it?
I am sharing the sample code:-
var modalInList = function(){
var originalList = document.getElementsByClassName("tt-menu");
var divElement = document.createElement("div")
divElement.id = "divToAdd";
var listElement = document.createElement("li");
listElement.id = "listToAdd";
var inputFieldForDose = document.createElement("input");
var inputFieldForFrequency = document.createElement("select");
var inputFieldForDays = document.createElement("input");
var take = document.createElement("span");
var tablet = document.createElement("span");
var forData = document.createElement("span");
var days = document.createElement("span");
take.innerHTML = "Take"
tablet.innerHTML = "Tablet"
forData.innerHTML = "for"
days.innerHTML = "Days"
divElement.appendChild(take);
inputFieldForDose.id = "doseList";
inputFieldForFrequency.id = "frequencyList";
inputFieldForDays.id = "daysList";
inputFieldForDose.contentEditable = 'true'
inputFieldForFrequency.contentEditable = 'true'
inputFieldForDays.contentEditable = 'true'
inputFieldForDose.style.color = "black";
inputFieldForDose.style.width = "45px";
inputFieldForDose.style.marginLeft = "1px";
inputFieldForDose.style.marginRight = "1px";
inputFieldForDose.style.textAlign = "center";
inputFieldForDose.style.padding = "1px";
inputFieldForDose.style.border = "solid 1px #c9c9c9";
inputFieldForFrequency.style.color = "black";
inputFieldForFrequency.style.width = "auto";
inputFieldForFrequency.style.marginLeft = "1px";
inputFieldForFrequency.style.marginRight = "1px";
inputFieldForFrequency.style.padding = "1px";
inputFieldForFrequency.style.border = "solid 1px #c9c9c9";
inputFieldForDays.style.color = "black";
inputFieldForDays.style.width = "45px";
inputFieldForDays.style.marginLeft = "1px";
inputFieldForDays.style.marginRight = "1px";
inputFieldForDays.style.marginTop = "2px";
inputFieldForDays.style.textAlign = "center";
inputFieldForDays.style.padding = "1px";
inputFieldForDays.style.border = "solid 1px #c9c9c9";
inputFieldForDose.setAttribute('type', 'number');
inputFieldForDays.setAttribute('type', 'number');
if (inputFieldForFrequency.selectedIndex == -1) {
var start = '';
var len = prescriptionFrequenciesData.length;
for (var i = 0; i < len; i++) {
start += '<option value="' + prescriptionFrequenciesData[i].value + '">' + prescriptionFrequenciesData[i].title;
}
inputFieldForFrequency.innerHTML = start;
}
inputFieldForFrequency.required = true;
divElement.appendChild(inputFieldForDose);
divElement.appendChild(tablet);
divElement.appendChild(inputFieldForFrequency);
divElement.appendChild(forData);
divElement.appendChild(inputFieldForDays);
divElement.appendChild(days);
listElement.appendChild(divElement);
originalList[0].prepend(listElement);
inputFieldForDose.addEventListener('click', function(){
editFieldCheck = true;
console.log("clicked");
inputFieldForDose.focus();
$(".tt-menu").show();
inputFieldForDose.focus();
})
inputFieldForFrequency.addEventListener('click', function(){
editFieldCheck = true;
console.log("clicked");
inputFieldForFrequency.focus();
$(".tt-menu").show();
inputFieldForFrequency.focus();
})
inputFieldForDays.addEventListener('click', function(){
editFieldCheck = true;
console.log("clicked");
inputFieldForDays.focus();
$(".tt-menu").show();
inputFieldForDays.focus();
})
}
Here inputFieldForDays is the element for element. and $(".tt-menu") is used for bloodhound.js list
I am creating something with JS and I cannot seem to add the style tag to a div that I created via javascript (I am not making a class for css for a reason do not suggest it) here is my code
function createForm()
{
var container = document.getElementsByClassName("container-fluid");
var formElement = document.createElement("form");
var inputName = document.createElement("input");
var inputEvent = document.createElement("input");
var inputTime = document.createElement("input");
var sendWithTimer = document.createElement("input");
var sendWithoutTimer = document.createElement("input");
var divContainer = document.createElement("div");
formElement.className = "form";
divContainer.className = "enforce-styles";
inputName.className = "name";
inputEvent.className = "event";
inputTime.className = "time";
sendWithTimer.className = "sendWithTimer";
sendWithoutTimer.className = "sendWithoutTimer";
inputName.setAttribute('type', "text");
inputEvent.setAttribute('type', "text");
inputTime.setAttribute('type', "text");
inputName.setAttribute('placeholder', "Name");
inputEvent.setAttribute('placeholder', "Event");
inputTime.setAttribute('placeholder', "Time");
sendWithTimer.setAttribute('type', "button");
sendWithoutTimer.setAttribute('type', "button");
sendWithTimer.setAttribute('value', "Timer");
sendWithoutTimer.setAttribute('value', "No timer");
formElement.appendChild(inputName);
formElement.appendChild(inputEvent);
formElement.appendChild(inputTime);
divContainer.appendChild(sendWithTimer);
divContainer.appendChild(sendWithoutTimer);
for (var formElementStyles = 0; formElementStyles < formElement.length; formElementStyles++)
{
formElement[formElementStyles].style.display = "-webkit-flex";
formElement[formElementStyles].style.display = "flex";
formElement[formElementStyles].style.webkitFlexDirection = "column";
formElement[formElementStyles].style.flexDirection = "column";
formElement[formElementStyles].style.position = "relative";
formElement[formElementStyles].style.top = 0;
formElement[formElementStyles].style.left = 40 + "%";
formElement[formElementStyles].style.padding = 0.6 + "em";
formElement[formElementStyles].style.margin = 1 + "em";
}
for (var divContainerStyles = 0; divContainerStyles < divContainer.length; divContainerStyles++)
{
divContainer[divContainerStyles].style.display = "-webkit-flex";
divContainer[divContainerStyles].style.display = "flex";
divContainer[divContainerStyles].style.webkitFlexDirection = "column";
divContainer[divContainerStyles].style.flexDirection = "column";
divContainer[divContainerStyles].style.position = "relative";
divContainer[divContainerStyles].style.top = 0;
divContainer[divContainerStyles].style.left = 40 + "%";
divContainer[divContainerStyles].style.padding = 0.6 + "em";
divContainer[divContainerStyles].style.margin = 1 + "em";
divContainer[divContainerStyles].style.height = 10 + "em";
}
container[0].appendChild(formElement);
container[0].appendChild(divContainer);
}
I cannot seem to get the second for loop to place the style tags. The div just appears with nothing but a class name which was set above. But I cannot get the styles on there. The styles are for two buttons inside a form I am inserting into a clients website. How can I get this to work? What am I doing wrong?
Your code does not apply the style to the input fields, because divContainer.length does not exist, neither does divContainer[divContainerStyles]. divContainer is an div Object and has no length attribute (as opposed to the form element, which does have a length attribute) so that's why it never gets into the second loop.
Your code produces the following error: https://jsfiddle.net/tdbju0ud/
Instead, you should check for the length of divContainer.childNodes and apply the styles to those.
for (var divContainerStyles = 0; divContainerStyles < divContainer.childNodes.length; divContainerStyles++)
{
divContainer.childNodes[divContainerStyles].style.display = "-webkit-flex";
...
}
A working test in: https://jsfiddle.net/Lvq6hvxd/
This will work- divContainer[divContainerStyles].setAttribute('style', <your styles>)
Use childNodes to get the child elements of the div container.
like
var nodes = divContainer.childNodes
Find out the length of this nodes array object to find out the child elements count of the div.
Here is the corrected code :
var container = document.getElementsByClassName("container-fluid");
var formElement = document.createElement("form");
var inputName = document.createElement("input");
var inputEvent = document.createElement("input");
var inputTime = document.createElement("input");
var sendWithTimer = document.createElement("input");
var sendWithoutTimer = document.createElement("input");
var divContainer = document.createElement("div");
formElement.className = "form";
divContainer.className = "enforce-styles";
inputName.className = "name";
inputEvent.className = "event";
inputTime.className = "time";
sendWithTimer.className = "sendWithTimer";
sendWithoutTimer.className = "sendWithoutTimer";
inputName.setAttribute('type', "text");
inputEvent.setAttribute('type', "text");
inputTime.setAttribute('type', "text");
inputName.setAttribute('placeholder', "Name");
inputEvent.setAttribute('placeholder', "Event");
inputTime.setAttribute('placeholder', "Time");
sendWithTimer.setAttribute('type', "button");
sendWithoutTimer.setAttribute('type', "button");
sendWithTimer.setAttribute('value', "Timer");
sendWithoutTimer.setAttribute('value', "No timer");
formElement.appendChild(inputName);
formElement.appendChild(inputEvent);
formElement.appendChild(inputTime);
divContainer.appendChild(sendWithTimer);
divContainer.appendChild(sendWithoutTimer);
for (var formElementStyles = 0; formElementStyles < formElement.length; formElementStyles++) {
formElement[formElementStyles].style.display = "-webkit-flex";
formElement[formElementStyles].style.display = "flex";
formElement[formElementStyles].style.webkitFlexDirection = "column";
formElement[formElementStyles].style.flexDirection = "column";
formElement[formElementStyles].style.position = "relative";
formElement[formElementStyles].style.top = 0;
formElement[formElementStyles].style.left = 40 + "%";
formElement[formElementStyles].style.padding = 0.6 + "em";
formElement[formElementStyles].style.margin = 1 + "em";
}
var divChildNodes = divContainer.childNodes;
for (var divContainerStyles = 0; divContainerStyles < divChildNodes.length; divContainerStyles++) {
divChildNodes[divContainerStyles].style.display = "-webkit-flex";
divChildNodes[divContainerStyles].style.display = "flex";
divChildNodes[divContainerStyles].style.webkitFlexDirection = "column";
divChildNodes[divContainerStyles].style.flexDirection = "column";
divChildNodes[divContainerStyles].style.position = "relative";
divChildNodes[divContainerStyles].style.top = 0;
divChildNodes[divContainerStyles].style.left = 40 + "%";
divChildNodes[divContainerStyles].style.padding = 0.6 + "em";
divChildNodes[divContainerStyles].style.margin = 1 + "em";
divChildNodes[divContainerStyles].style.height = 10 + "em";
}
container[0].appendChild(formElement);
container[0].appendChild(divContainer);