CODEWITHSUNDEEP
javascripthtmlcss
jmj
jmj

Reputation: 145

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

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>

Upvotes: 0

Views: 4422

Answers (4)

Praveen
Praveen

Reputation: 56509

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.

Upvotes: 0

Surreal Dreams
Surreal Dreams

Reputation: 26380

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.

Upvotes: 0

Travesty3
Travesty3

Reputation: 14479

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.

Upvotes: 1

EnterSB
EnterSB

Reputation: 1162

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>

Upvotes: 0

Related Questions