innerHTML and insertAdjacentHTML Problem

[Catman]

I have a page with these lines of code in a function:


cTable.innerHTML="<h1>" + tableType + "<\/h1>";

.....

cTable.insertAdjacentHTML ("beforeEnd", "<button type=\'button\' onClick=\'if (changeType > 2) changeType=10; makeChange(\"" + incolor + "\");\' style=\'background-color:" + incolor + ";\'><\/button>");


With IE 6.0 and Netscape 6.2, the function does as expected (create a table of buttons with the 216 safe colors).

With IE 5.0 for Macs, however, the page does not render correctly. So far as I can figure, IE 5 is choking on the string creation -- for example, in the innerHTML righthand side, the browser seems to balk after the second quote mark.

If I remove that first line, it balks at the second quote mark of the string passed to insertAdjacent HTML.

The full page url: http://www1.iastate.edu/~wsthune/cps/colors.html

[beetle]

Wouldn't some DOM methods be better? Sure, it's more code, but you probably won't have lockups on NS6 anymore, and it just might work with IE5 Macvar t = document.getElementById('cTable')
var h = document.createElement("h1")
h.text = tableType;
t.appendChild(h);

var clickStr = "if (changeType > 2) changeType=10; makeChange(\"" + incolor + "\");";
var styleStr = "background-color:" + incolor + ";";
var i = document.createElement("button");
i.type = "button"
i.onClick = clickStr;
i.style = styleStr;
t.appendChild(t); Or something like that, I didn't debug...:D

[Catman]

I will try that between students this afternoon (fingers crossed) and report back the results.

Thanks.

[Catman]

beetle's suggestion worked quite well -- the table now renders on IE 5.0 as intended.

Two new problems, however, have cropped up: The heading is not visible on the page with Netscape, and the buttons don't work in any browser flavor.

The latter problem is the more important issue at the moment.

Here's the entire function as modified:


//this function builds a dynamically modifiable table of web safe colors
function buildTable(tType)
{
l=0;
tableTitle=titlesArray[tType] + " Color Table";
if (document.all) cTable=document.all["colorTable"]
else cTable=document.getElementById("colorTable");
while (cTable.firstChild != null) cTable.removeChild(cTable.firstChild);
cHeader=document.createElement("h1");
cHeader.innerText=titlesArray[tType] + " Color Table";
cTable.appendChild(cHeader);
for (i=0; i<16; i+=3)
{
for (j=0; j<16; j+=3)
for (k=0; k<16; k+=3)
{
switch (tType)
{
case 0: incolor = "#" + hValues[i] + hValues[j] + hValues[k]; break;
case 1: incolor = "#" + hValues[i] + hValues[k] + hValues[j]; break;
case 2: incolor = "#" + hValues[j] + hValues[i] + hValues[k]; break;
case 3: incolor = "#" + hValues[k] + hValues[i] + hValues[j]; break;
case 4: incolor = "#" + hValues[j] + hValues[k] + hValues[i]; break;
case 5: incolor = "#" + hValues[k] + hValues[j] + hValues[i]; break;
case 6: incolor = "#" + hValues[j] + hValues[0] + hValues[k]; break;
case 7: incolor = "#" + hValues[k] + hValues[0] + hValues[j]; break;
case 8: incolor = "#" + hValues[j] + hValues[k] + hValues[0]; break;
case 9: incolor = "#" + hValues[k] + hValues[j] + hValues[0]; break;
case 10: incolor = "#" + hValues[0] + hValues[j] + hValues[k]; break;
case 11: incolor = "#" + hValues[0] + hValues[k] + hValues[j]; break;
}
clickString=stringStart + incolor + stringEnd;
cButton=document.createElement("button");
cButton.Type="button";
cButton.style.backgroundColor=incolor;
cButton.onClick=clickString;
cTable.appendChild(cButton);
if (l == 105)
{
newLine=document.createElement("br");
cTable.appendChild(newLine);
l=0;

}
else l+=3;
}
if (tType > 5)
{
whiteSpace=document.createElement("p");
if (document.all) whiteSpace.style.height="81px";
else whiteSpace.style.height="45px";
whiteSpace.style.backgroundColor="#666666";
cTable.appendChild(whiteSpace);
break;
}
}
}


No javascript errors are thrown, but I'm guessing that something's not quite right with either the creation of clickString or the cButton.onClick assignment.

[beetle]

I never really added events to objects before (in this fashion), so I was just quessing This thread (http://www.codingforums.com/showthread.php?s=&threadid=5755&highlight=attachEvent) may shed some light.

attachEvent
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/attachevent.asp

addEventListener
http://www.mozilla.org/docs/dom/domref/dom_el_ref31.html#1028304

[Catman]

I'll keep these in mind if I decide to revive the original design. Over the weekend, I redesigned the function so it merely added colors to pre-existing buttons and assigned incolor to the value attribute. That took care of the functionality problems.

Now I just have to revamp my horrific CSS design so the page displays as intended. ;)

Thanks for your help. :thumbsup: