document.getElementById() returns null .

lucky_php

Hi All,

I am creating an <select> list box through HTML embedded in javascript code.
and want some javascript function to be called to populate the list.

My code is something like this .-

function myFunction() //contains HTML code for listbox.
{
var form_string =" ...
<div>"
+"<select id=\"searchRelDept1\" name=\"searchRelDept1\" class=\"pcselects\" onChange=\"\">";

///have to populate this by JS function
+"</select></div>";

populateListBox(document.getElementById('searchRelDept1')); //call to function to fill listbox.

return form_string;
}

Caller function [of myFunction()]generates the form using variable form_String.
I am writing a method in javascript -populateListBox() which is passed document.getElementByID() but in the method body ,it is always null.

Is there any way that i can populate the <select> listbox dynamically on the client side using a JS function?
and i can use document.getElementByID() somehow.

Krik

Couple of quick observations. first you had a ";" misplaced best I could tell. Of couse there looks to be more to the code than what was posted so maybe not.

But the most improtant thing is you will need to use getElementById().innerHTML to replace the internal contents of an element.

function myFunction() //contains HTML code for listbox.
{
var form_string =" ...
<div>"
+"<select id=\"searchRelDept1\" name=\"searchRelDept1\" class=\"pcselects\" onChange=\"\">"
///have to populate this by JS function
+"</select></div>";

populateListBox(document.getElementById('searchRelDept1').innerHTML); //call to function to fill listbox.

return form_string;
}

Now it sounds like you will be adding <option>'s one at a time to you will first need to get the innerHTML and then add the new html to it.

lucky_php

Hi thanks for replying back to my query.

InnerHTML doesnt work either.
document.getELementById() doesnt seem to work.It returns null and i get Js error where ever tried to access the <select> by thru getElementByID().
I can send some more code snippet if you wish.

Even if i dnt use the elementID as parameter to the function populateListBox(),
in method itself i try to catch the id of element...doesnt work /:-(

Krik

I was thinking about it some more and realized its null because you haven't created the element at the time you make a call to it.

Look at your code the element is just a string it isn't yet been placed in any part of the page.

The error is tell you the element doesn't exists.