Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ames, IA, USA
    Posts
    373
    Thanks
    0
    Thanked 0 Times in 0 Posts

    innerHTML and insertAdjacentHTML Problem

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

    Code:
      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
    Need more emoticons?
    Visit Catman's Private Stock

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 Mac
    Code:
    var 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...
    Last edited by beetle; 09-06-2002 at 05:17 PM.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ames, IA, USA
    Posts
    373
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I will try that between students this afternoon (fingers crossed) and report back the results.

    Thanks.
    Need more emoticons?
    Visit Catman's Private Stock

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ames, IA, USA
    Posts
    373
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    //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.
    Need more emoticons?
    Visit Catman's Private Stock

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I never really added events to objects before (in this fashion), so I was just quessing This thread may shed some light.

    attachEvent
    http://msdn.microsoft.com/workshop/a...ttachevent.asp

    addEventListener
    http://www.mozilla.org/docs/dom/domr...1.html#1028304

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Ames, IA, USA
    Posts
    373
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Need more emoticons?
    Visit Catman's Private Stock


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •