Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Problem using innerHTML

Status
Not open for further replies.

luckydexte

Programmer
Apr 26, 2001
84
US
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
 
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
 
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:
Code:
{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.

Code:
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
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top