adding css styles to dynamically added <form> elements in java script

Question

I used the following code (Javascript) to dynamically load elements into "Mobile Webpage". It works fine but i can't set CSS styles(like height,width...) to those newly added elements.

here by this code buttons are loaded perfectly . in this i am unable to vary the size of dynamically loaded button using css elements.

<head>
<script type="text/javascript">
var arrayToModify = [];
window.onload = function () {
var i, MyArray, ButtonContainer, NewButton;
MyArray = ["Option 1","Option 2","Option 3","Option 4","Option 5"];
ButtonContainer = document.getElementById("Button_holder");
for (i = 0; i < MyArray.length; i++) {
NewButton = document.createElement('input');
NewButton.type = 'button';
NewButton.value = MyArray[i];
NewButton.id = MyArray[i];;
NewButton.onclick = function () {
alert('You Clicked '+this.id);
arrayToModify[arrayToModify.length] = this.id;
};
ButtonContainer.appendChild(NewButton);
}
};
</script>
<style>
NewButton
{
width:100%;
height:120px;
background-color:red;
}
ButtonContainer
{
width:100%;
height:120px;
background-color:yellow;
}
.divclass
{
height:400px;
background-color:lightblue;
}
</style>
</head>
<body>
<div id="Button_holder" class="divclass">
</div>
<input type='button' onclick='alert(arrayToModify);' class="ntl" value='Vote' />
</body>
</html>

Travesty3 · Accepted Answer · 2013-07-01 15:25:00Z

Your CSS is wrong. CSS doesn't look at JS variable names. So your CSS selectors are looking for those HTML tags (i.e. an HTML tag <NewButton>, which obviously doesn't exist).

Instead, try adding a class to each of your new inputs and button container, and then prefix your CSS selectors with a . (which is a class selector).

Here is an example: jsFiddle Demo

HTML:

<div id="Button_holder" class="divclass ButtonContainer"> <!-- added a class name here -->
</div>
<input type='button' onclick='alert(arrayToModify);' class="ntl" value='Vote' />

CSS:

.NewButton
{
    width:100%;
    height:120px;
    background-color:red;
}
.ButtonContainer
{
    width:100%;
    height:120px;
    background-color:yellow;
}
.divclass
{
    height:400px;
    background-color:lightblue;
}

JS:

var arrayToModify = [];
window.onload = function () {
    var i, MyArray, ButtonContainer, NewButton;
    MyArray = ["Option 1","Option 2","Option 3","Option 4","Option 5"];
    ButtonContainer = document.getElementById("Button_holder");
    for (i = 0; i < MyArray.length; i++) {
        NewButton = document.createElement('input');
        NewButton.type = 'button';
        NewButton.value = MyArray[i];
        NewButton.id = MyArray[i];
        NewButton.className = 'NewButton'; // added a class name here
        NewButton.onclick = function () {
            alert('You Clicked '+this.id);
            arrayToModify[arrayToModify.length] = this.id;
        };
        ButtonContainer.appendChild(NewButton);
    }
};

And, as @SurrealDreams said, it would be a good idea to keep your CSS in an external file to make it easier to maintain and reuse. Suppose you had multiple pages with the exact same styles? Instead of rewriting these styles every time, just put them in an external .css file and then include that file in your <head> using something like <link rel="stylesheet" type="text/css" href="path/to/your/css/file.css" />.

I would really suggest you go through a CSS tutorial. For this specific problem, this section should prove useful.

EnterSB · Accepted Answer · 2013-07-01 15:16:42Z

0

What are NewButton and ButtonContainer in css? It looks written as tags. If you need those as classes, you should set . before each, e.g. .NewButton.

Updated code:

<head>
<script type="text/javascript">
var arrayToModify = [];
window.onload = function () {
var i, MyArray, ButtonContainer, NewButton;
MyArray = ["Option 1","Option 2","Option 3","Option 4","Option 5"];
ButtonContainer = document.getElementById("Button_holder");
for (i = 0; i < MyArray.length; i++) {
NewButton = document.createElement('input');
NewButton.type = 'button';
NewButton.value = MyArray[i];
NewButton.className = 'NewButton';
NewButton.id = MyArray[i];;
NewButton.onclick = function () {
alert('You Clicked '+this.id);
arrayToModify[arrayToModify.length] = this.id;
};
ButtonContainer.appendChild(NewButton);
}
};
</script>
<style>
.NewButton
{
width:100%;
height:120px;
background-color:red;
}
.ButtonContainer
{
width:100%;
height:120px;
background-color:yellow;
}
.divclass
{
height:auto;
background-color:lightblue;
}
</style>
</head>
<body>
<div id="Button_holder" class="divclass">
</div>
<input type='button' onclick='alert(arrayToModify);' class="ntl" value='Vote' />
</body>
</html>

answered Jul 1, 2013 at 15:16

EnterSB

1,1822 gold badges15 silver badges30 bronze badges

4 Comments

Travesty3 Over a year ago

Don't forget to add the ButtonContainer class to the div.

EnterSB Over a year ago

divclass is better, I suppose, it will expand itself by button sizes.

Travesty3 Over a year ago

@EnterSB: In your CSS, you have a selector called .ButtonContainer, but there are no elements in your code that have that class. So I'm suggesting that you modify your answer to either remove the .ButtonContainer CSS rule (since it isn't being used anywhere) or add the ButtonContainer class to the div.

EnterSB Over a year ago

It is original code from user that asked question, I wanted it to stay to allow user to see what is different against own code.

Surreal Dreams · Accepted Answer · 2013-07-01 17:11:40Z

0

Your approach has been to assign CSS styles to the names of JavaScript variables/objects. There's no direct connection between the two - CSS is looking for HTML elements with tags named ButtonContainer and NewButton. CSS isn't "smart" - it's not going to map the HTML generated by JavaScript to the styles. It's looking for a simple match, so you need to design the code so it has a match.

To answer your question as asked, you could include a line like this...

NewButton.style = "width: 20px; height: 40px; border: 1px solid #000;";

This will set styles on each generated NewButton element. Using CSS classes will give you a better overall result.

Please note - there's a better approach.

In general, the best approach is to create your code with classes and ids as part of the code. Include CSS rules in your general CSS files to style those elements.

While you can add style to generated code, it's best to keep all your styling in the CSS files. It's much easier to maintain that way. It's all in one place, and a typo won't break your scripts. CSS is much more tolerant of errors. Inline styles are best avoided, just like it's best to avoid JavaScript written inside HTML elements.

edited Jul 1, 2013 at 17:11

answered Jul 1, 2013 at 15:13

Surreal Dreams

26.4k4 gold badges49 silver badges61 bronze badges

2 Comments

Travesty3 Over a year ago

Probably not a good idea to say "avoid using inline CSS" and then immediately give a solution using inline CSS...

Surreal Dreams Over a year ago

I know, I was conflicted about that. I wanted to give my thoughts on what I consider best practice, but I also wanted to suggest something that actually answers the question too.

Praveen · Accepted Answer · 2013-07-01 20:10:26Z

0

In Javascript, you can add css Class like this:

For instance:

document.getElementById("your-ID").setAttribute("class", "your-className");

Try like this.

EDIT: As Travesty3 mentioned you're missing the add . for class selector in css. Once you correct mistake, you can use the above approach to add the classes.

ButtonContainer.setAttribute("class", "ButtonContainer");
NewButton.setAttribute("class", "NewButton");

Add the above two lines at the last of your JS code. check this Updated JSFiddle in this I've reduced the remove the height and width of the button to show difference.

edited Jul 1, 2013 at 20:10

answered Jul 1, 2013 at 15:15

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

3 Comments

Travesty3 Over a year ago

This answer is incomplete. The question wasn't "How do I add a class using JS". The CSS is wrong, so just adding a class will not fix the problem.

ElmoVanKielmo Over a year ago

You're right of course. I've only edited the erroneous id and class name. It is up to @user1671639 to tell everything he/she wanted to tell.

Praveen Over a year ago

@Travesty3 and @ ElmoVanKielmo Thanks for your comments, I've updated my answer.

Collectives™ on Stack Overflow

adding css styles to dynamically added <form> elements in java script

4 Answers 4

Comments

4 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related