Linking javascript error with hard-coded html in C# string builder object

Question

This is probably the first time I had to deal with a javascript error when studying somebody else's code. Please help me out.

This webform is supposed to send an email when one submits a buttton. However, a javascript error fires up preventing it from doing so:

So this is where it takes me to when i hit Yes

I tracked down and see this piece of code below

Question is: Does property "display" in the popup refer to the value of attribute 'style' of the row tag < td >? cellColor is initialized to 'ffffff', ie cellColor = "ffffff"; would cellColor cause the property 'display' undefined/null if cellColor is ever be undefined/null?

align='left valign=middle style=background-color: #" + cellColor + "; border: solid 1px #000000;\\">"

(This is the codes I tracked down)

Answer 1

I'm an admitted JS hack; a JS guru may have a better solution...

The issue here is that the divHRSupervisors.childNodes[i].style.display != 'none' will throw the undefined error whenever a child node does not contain an inline style with a display attribute, ie,

Will work:

<div style="display: block;">content</div>
- or -
<div style="display: none;">content</div>

Will not work:

<div>content</div>

Additionally, whenever childNodes is used, all nodes are included, including text. For example...

0 child nodes for the 'Test' div:

<div id="Test"></div>

1 child nodes for the 'Test' div (the text inside the div counts as a child node):

<div id="Test">content</div>

3 child nodes for the 'Test' div (1 for the main text content, 1 for the inner <div> and 1 for the inner <div> 's content):

<div id="Test">
  content
  <div>child content</div>
</div>

With the conditional test in your current JS, anytime a child node is encountered that does not have the inline style of display set, an error will be thrown.

One solution would be to add a common class to any elements you want to check for the style.display property and then check to see if the display is set to none. Something along the lines of:

var divs = document.getElementById("divHRSupervisors");
var children = divs.childNodes;

for (var i = 0; i < children.length; i++) {
    var child = children[i];
    // someClass is a class applied to all elements you want to verify
    if (child.className == 'someClass') {
        // check to see if there is a display property and if the display
        // property does not equal none.
        if (child.style.display && child.style.display != 'none') {
            alert(child.nodeName);
            // do other stuff.
        }
    }
}

Your HTML will look something like the following (note the use of the someClass):

<div id="divHRSupervisors">
    <div class="someClass">hello</div>
    <div class="someClass" style="display: block;">world</div>
</div>