Creating dynamic CSS in Javascript

Question

I am trying to create an info window for Google maps and need to generate a dynamic form to display information.

The following scripts generates an error called "No_found_err: DOM exception 8":

//create objects for HTML elements              
var inputElement1 = document.createElement("input");
var inputElement2 = document.createElement("input");

//assign different attributes to the element
inputElement1.setAttribute("type", "text");
inputElement1.setAttribute("id", "poiName");
inputElement2.setAttribute("type", "textarea");
inputElement2.setAttribute("id", "poiDesc");

//create style tag, atrributes and values
//add css style to head tag and define classname for HTML "desctag" element
var cssNode = document.createElement("style");
cssNode.setAttribute("type", "text/css");
cssNode.style.cssText = ".cssClass {vertical-align: text-top; width: 250px; height: 150px }";

document.getElementsByTagName("head")[0].appendChild("cssNode");
document.getElementById("poiDesc").className = "cssClass";

var formString = "<b>Enter location details:</b>
<p>Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
"&nbsp;&nbsp;&nbsp;" + inputElement1 + "<br>Description:&nbsp;&nbsp;" + inputElement2 +
"<p><center>" + "<input type='button' id='saveBtn' value='Save' onclick='savePOI()'>  
</center>";

//insert values into the form elements      
document.getElementById("poiName").value = locList[i].name;
**document.getElementById("poiDesc").value = locList[i].desc;**

This error appears in between the last two lines. Does it mean that the tag id "poiName" and/or "poiDesc" have not been created?

How can I solve the above problem?

Thank you.

What browser do you get this error in? I think it would say something differently if the elements "poiName" or "poiDesc" weren't found. What is locList? — Ian
– Ian, Commented Oct 5, 2012 at 5:45

Musa · Accepted Answer · 2012-10-05 05:46:57Z

1

document.getElementsByTagName("head")[0].appendChild("cssNode"); should be document.getElementsByTagName("head")[0].appendChild(cssNode); notice cssNode isn't quoted, you passed a string to append Child instead of the node.

inputElement1 and inputElement1 are elements not string, so appending them to an html string wont give the desired results. Also you never add them or the html string to the dom, so document.getElementById wont be able to find them.

answered Oct 5, 2012 at 5:46

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashwin Singh · Accepted Answer · 2012-10-05 05:46:32Z

0

Yes, instead you should use inputElement1 and inputElement2.

document.getElementById() gets an element with the id in the document. The document does not have it until now. It will only when rendered.

answered Oct 5, 2012 at 5:46

Ashwin Singh

7,3855 gold badges38 silver badges55 bronze badges

Comments

enhzflep · Accepted Answer · 2012-10-05 08:10:01Z

In addition to the other answers, this code needs to be changed from:

cssNode.style.cssText = ".cssClass {vertical-align: text-top; width: 250px; height: 150px }";

to:

cssNode.innerText = ".cssClass {vertical-align: text-top; width: 250px; height: 150px }";

Your code was doing the equivalent of this:

<style type='text/css' style='.cssClass {vertical-align: text-top; width: 250px; height: 150px }'></style>

(incidently, since the style string includes the class and the braces, it's invalid when used in this way. This means you actually create <style type='text/css'></style> )

While I assume it was your intention to do this (formatting added for clarity)

<style>
  .cssClass 
  { 
    vertical-align: text-top;
    width: 250px;
    height: 150px;
  }
</style>

Here's a complete example of (a) creating style elements on the fly (b) modifying css on the fly (c) extracting info from items in a list.

Enjoy. :)

<!DOCTYPE html>
<html>
<head>
<style>
label
{
    width: 75px;
    display: inline-block;
}
</style>
<script>
var locList = [ {name:'Australia', desc:'pop. 22,620,600', col:'green', bg:'yellow'}, {name:'New Zealand', desc:'pop. 4,405,200', col:'white', bg:'black'} ];
function byId(e){return document.getElementById(e);}

var dynamicCSS;

function selChange(element)
{
    var arrayIndex = element.value;
    if (arrayIndex != -1)
    {
        byId('poiName').value = locList[arrayIndex].name;
        byId('poiDesc').value = locList[arrayIndex].desc;

        var styleStr = "#poiName,#poiDesc{color: " + locList[arrayIndex].col + "; background-color: " + locList[arrayIndex].bg + "; }";
        dynamicCSS.innerHTML = styleStr;
    }
    else
    {
        byId('poiName').value = byId('poiDesc').value = 'No option selected';
        dynamicCSS.innerHTML = '';
    }
}

function myInit()
{
    var st = document.createElement('style');
    st.innerHTML = '#poiName, #poiDesc{border:solid 2px green;}';
    document.body.appendChild(st);

    dynamicCSS = document.createElement('style');
    document.body.appendChild(dynamicCSS);
}
</script>
</head>
<body onload='myInit();'>
    <form id='myform'>
        <label for='optSel'>Option:</label>
        <select id='optSel' onchange='selChange(this);'>
            <option value='-1'>None selected</option>
            <option value='0'>Aus</option>
            <option value='1'>NZ</option>
        </select>
        <br>
        <label for='poiName'>Name</label><input id='poiName'/>
        <br>
        <label for='poiDesc'>Desc</label><input id='poiDesc'/>
    </form>
</body>
</html>

I would actually like to extract data stored in an array locLost[i] and populate them into the form elements "poiName" and "poiDesc". This block of code is within a for-loop.<p> locList[i].name into poiName locList[i].desc into poiDesc <p> How should I code to put these values into the respective form elements? Also, how could I add inputElement1 and inputElement2 to DOM then? <p> Thanks.

Collectives™ on Stack Overflow

Creating dynamic CSS in Javascript

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related