CODEWITHSUNDEEP
javascriptcsshtml
TheCodeNovice
TheCodeNovice

Reputation: 692

Element created by JavaScript not being formated by CSS file

I am making a select element using an embedded js script which is shown below. I do see that I have a select element on the page but the dropdown is blank. The default selection is not shown either. The reason why I think the CSS is not working is that the size is way off. I made a static select not from js and it is much larger. Any suggestions?

* UDPATE*

I appended the select element but now I have two. One which has the choices and is not affected by the CSS and one that is blank that is formatted properly by the CSS sheet. What gives?

<script>
             function processCSV(file,parentNode)
             {
                var frag = document.createDocumentFragment()
                , lines = file.split('\n'), option;                 
                var intial_option = document.createElement("option");

                intial_option.setAttribute("value","");
                intial_option.setAttribute("disabled","disabled");
                intial_option.setAttribute("selected","selected");
                intial_option.innerHTML = "Please select a Plant";
                frag.appendChild(intial_option)

                for (var i = 0, len = lines.length; i < len; i++){
                    option = document.createElement("option");
                    option.setAttribute("value", lines[i]);
                    option.innerHTML = lines[i];                        
                    frag.appendChild(option);
                    }

                parentNode.appendChild(frag);
                                            menuholder.appendChild(parentNode);
             }

             var plant_select = document.createElement("select");  
             var datafile = '';
             var xmlhttp = new XMLHttpRequest();

             plant_select.setAttribute("class", "selectbox");   
             plant_select.setAttribute("id", "plant_select");



             xmlhttp.open("GET","http://localhost:8080/res/plants.csv",true);
             xmlhttp.send();
             xmlhttp.onreadystatechange = function()
             {
                if(xmlhttp.status==200 && xmlhttp.readyState==4)
                {
                    processCSV(xmlhttp.responseText, plant_select);
                }
             }
        </script>

the coresponding CSS file section is shown below 

body
 {
    padding: 0;
     margin: 0;
background-color:#d0e4fe;
font-size: 2em;
      font-family: monospace;
      font-weight: bold;
  }

and 

.menu_container
{
   position: relative;
    margin: 0 auto;
 }
.menu_element
{ 
float: right;
width: 33%;
}

Upvotes: 0

Views: 289

Answers (1)

JAL
JAL

Reputation: 21563

I believe you need to insert plant_select into the dom.

So before you execute processCSV, do something like

var body_elem=document.getElementsByTagName('body')[0];
body_elem.appendChild(plant_select);

varying the first line (which element to append to) depending on where exactly you want your menu. See https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild for info on creation and insertion of document elements, also see insertBefore.

I don't see where you're putting the options into the document either, actually.

Also this may help, since you're in IE especially - rather than plant_select.setAttribute("class", "selectbox"); plant_select.setAttribute("id", "plant_select");

Try

     plant_select.className="selectbox";   
     plant_select.id="plant_select";

IE in particular has had issues with improperly choosing to map attributes to properties. Setting the id and class this way is more reliable than setAttribute.

Upvotes: 2

Related Questions