Problem using innerHTML

[luckydexte]

Hello all,

I am trying to create a popup div tag on the fly (which is working) but I need to create a list of links and call a javascript function with a parameter. The values I am trying to send in are being sent in as strings and not the variables. Has anyone come across this before? A snippet of my code is below.

string = "<span id=\"close\"><a href=\"javascript:setVisible('miscLayer')\" style=\"text-decoration: none\"><strong>Hide</strong></a></span>";
string += "<table border=\"0\" cellspacing=\"2\" cellpadding=\"2\">";

for (i=0;i<x.length;i++) {
segIdArray = x.childNodes[1].childNodes[0].nodeValue;
string += "<tr>";
string += "<td class=\"text\"><a href=\"javascript:LoadRoadCond(i);\">" + x.childNodes[1].childNodes[0].nodeValue + "</a></td>";
string += "<td class=\"text\">" + x.childNodes[6].childNodes[0].nodeValue + "</td>";
string += "<td class=\"text\">" + x.childNodes[7].childNodes[0].nodeValue + "</td>";
string += "<td class=\"text\">" + x.childNodes[8].childNodes[0].nodeValue + "</td>";
string += "<td class=\"text\">" + x.childNodes[0].childNodes[0].nodeValue + "</td>";
string += "</tr>";
}

string += "</table>";
miscLayer.innerHTML = string;
alert(miscLayer.innerHTML);
setVisible('miscLayer');

The string that is created is below:
<span id="close"><a href="javascript:setVisible('miscLayer')" style="text-decoration: none"><strong>Hide</strong></a></span>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<td class="text"><a href="javascript:LoadRoadCond(i);">56683</a></td>
<td class="text">6444</td>
<td class="text">West St</td>
<td class="text">split north of Forest Dr</td>
<td class="text">81</td>
</tr>
<tr>
<td class="text"><a href="javascript:LoadRoadCond(i);">56686</a></td>
<td class="text">6444</td>
<td class="text">Admiral Cochrane Dr</td>
<td class="text">Split north of Forest Dr</td>
<td class="text">60</td>
</tr>
</table>

That is all correct. However, the function LoadRoadCond gets the variable i and it uses 2 every time. 2 is what i is after the loop ends.

Any ideas?

Thanks,

Brandon

 

[feherke]

Hi

[gray]// ...[/gray]

string += "<td class=\"text\"><a href=\"javascript:LoadRoadCond([red]"+[/red]i[red]+"[/red]);\">" + 

[gray]// ...[/gray]

Feherke.

http://rootshell.be/~feherke/

 

[luckydexte]

That worked!! Thank you so much - I hate to admit it but I have been working on this for over an hour. Stupid me did not realize that the string was treating the variable as a string.

Thanks again,

Brandon

 

[RestonDeveloper]

Hey just wanted to pass this along. use CSS more.

in your javascript you are creating a string a span with a link that is styled differently:

{span id="close"}{a href="..." style=\"text-decoration: none\"}{strong}Hide{/strong}{/a}{/span}

While this doesn't seem like a big deal now, trust me the more you delve in and work larger scale you'll be glad you are writing less styles.

span#close a {text-decoration:none;font-weight:bold; }

Also you are misusing a span+link.
[ol]
[li]span serves no point here other than id="close", really the link could have an id="close"
[/li]
[li]
Your using a link which you don't want to look like a link, and using the link location to call an onclick event. i am guessing you are doing this because you like how links have a hand pointer on hover. you can add that style to onmouseover="this.style.cursor='pointer'"; merge the span+a tags into just div tag.
[/li]
[/ol]

just some thoughts on your approach going forward with development