Problems setting style tag to a div

Question

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?

Answer 1

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/

Answer 2

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

Answer 3

This will work- divContainer[divContainerStyles].setAttribute('style', <your styles>)