Need help displaying tables

@Magnus9998Jun 11.2011

Hey guys, I need your help because I don’t know what’s wrong with my code.

What I am trying to do, is as easy as display a (big) table with random colors. I am using this thing as a engine for… something bigger, like displaying an image in a table, using the cells as pixels. I have that part already covered.

But my code seems to be unable to display the table. I am trying to display the table using a <div>, but when I run it, it doesn’t display the table.

Here’s the relevant code:

[CODE]function DrawFrame() { document.getElementById(“debug”).innerHTML += ‘<table border=1><tr>n’;

for(n = 0; n < frame.length; n++){ document.getElementById(“debug”).innerHTML += ‘<td bgcolor=”‘ + palette[frame[n]] + ‘”></td>n’; curline++; pixel++; document.getElementById(“debug2”).innerHTML = “#” + palette[frame[n]];

if(curline >= lines){ curcol++; curline = 0; document.getElementById(“debug”).innerHTML += ‘</tr><tr>n’;

if(curcol >= columns || pixel >= (lines*columns)){ document.getElementById(“debug”).innerHTML += ‘</tr>n</table>’; break; }

}

} return;

}[/CODE]

The code seems to execute well, except for the table not showing. No table, no colors… nothing. If I put some text, it shows the text. If I put the value of a variable, it shows the value of the variable, but not the table. The DIVs are properly created in HTML

[CODE]<body onload=”BegginProgram();”> <div id=”debug”></div> <div id=”debug2″></div> </body>[/CODE]

NOTE: ~~[I]~~BegginProgram[/I] is the function that I use to start the script.

The problem is, I don’t know what the problem is, and I am unable to locate the problem. The HTML seems to be right, and also the JavaScript code, so I don’t know what the problem is…

I hope you can help me. Thanks in advance for your time.

to post a comment

JavaScript

5 Comments(s) _↴

@JMRKERJun 11.2011 — #Not everything given to help much...

Where are the following defined:

Array "frame"

Array "pallette"

'curcol', 'curcol' and 'lines' are not initialized, just used...

@Magnus9998authorJun 11.2011 — #Here's the complete code. Hope it helps.

[CODE]<script language="javascript">
 
 function IntToHex(s_int)
 {
 s_int = s_int.toString(16);
 if (s_int < 0)
 {
 s_int = 0xFFFFFFFF + s_int + 1;
 }
 //document.getElementById("debug2").innerHTML = s_int;
 return s_int.toString(16).toUpperCase();
 }
 
 function HexToInt(s_hex) {
 eval("var n_num=0X" + s_hex);
 //document.getElementById("debug2").innerHTML = n_num;
 return n_num;
 }
 
 var palette = new Array(255);
 var frame = new Array(16384);
 var lines = 128;
 var columns = 128;
 var curline = 0;
 var curcol = 0;
 var pixel = 0;
 
 function WrittePalette() {
 
 var randomcolor;
 
 for(n = 0; n < palette.length; n++){
 var randomcolor = IntToHex(Math.floor(Math.random()*65536));
 randomcolor += IntToHex(Math.floor(Math.random()*255));
 if(randomcolor.split("").length < 6){
 randomcolor += "F";
 }
 palette[n] = randomcolor;
 //document.getElementById("debug2").innerHTML = palette[n];
 }
 
 }
 
 function WritteFrame() {
 
 var randompixel;
 
 for(n = 0; n < frame.length; n++){
 var randompixel = Math.floor(Math.random()*(palette.length + 1));
 frame[n] = randompixel;
 //document.getElementById("debug2").innerHTML = frame[n];
 }
 
 }
 
 function DrawFrame() {
 document.getElementById("debug").innerHTML += '<table border=1><tr>n';
 
  for(n = 0; n < frame.length; n++){
   document.getElementById("debug").innerHTML += '<td bgcolor="' + palette[frame[n]] + '"></td>n';
   curline++;
   pixel++;
   document.getElementById("debug2").innerHTML = "#" + palette[frame[n]];
 
   if(curline >= lines){
   curcol++;
   curline = 0;
   document.getElementById("debug").innerHTML += '</tr><tr>n';
 
   if(curcol >= columns || pixel >= (lines*columns)){
   document.getElementById("debug").innerHTML += '</tr>n</table>';
   break;
   }
 
   }
 
  }
  return;
 
 }
 
 function BegginProgram() {
 WrittePalette();
 WritteFrame();
 DrawFrame();
 }
 </script>[/CODE]

It creates a palette of 256 random hex colors, and asign random colors from the palete to the image. Then it prints the image using HTML tables. It should work fine on Firefox (I tested it, but assigning everything manually to the table, and it works).

However, the problem is not in the arrays, nor in the variables. I tested them and they has what they should have. The problem is in the DrawFrame() method. It doesn't add the table for some reason.

@JMRKERJun 11.2011 — #I'm not sure I understand the purpose of 'debug2', so I took it out.

You can put it back in if needed.

Note that script does need a few seconds to complete, so don't abort too early.

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Random Color&lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 // From: http://www.webdeveloper.com/forum/showthread.php?p=1159025#post1159025
 
 function IntToHex(s_int) {
 s_int = s_int.toString(16);
 if (s_int &lt; 0) { s_int = 0xFFFFFFFF + s_int + 1; }
 //document.getElementById("debug2").innerHTML = s_int;
 return s_int.toString(16).toUpperCase();
 }
 
 function HexToInt(s_hex) {
 eval("var n_num=0X" + s_hex);
 return n_num;
 }
 
 var palette = new Array(255);
 var frame = new Array(16384);
 var lines = 128;
 var columns = 128;
 var curline = 0;
 var curcol = 0;
 var pixel = 0;
 
 function WrittePalette() {
 var randomcolor;
 //  for(n = 0; n &lt; palette.length; n++){
 for(n=0; n&lt;256; n++){
 var randomcolor = IntToHex(Math.floor(Math.random()*65536));
 randomcolor += IntToHex(Math.floor(Math.random()*255));
 if(randomcolor.split("").length &lt; 6){ randomcolor += "F"; }
 palette[n] = randomcolor;
 }
 }
 
 function WritteFrame() {
 var randompixel;
 //  for(n = 0; n &lt; frame.length; n++){
 for(n=0; n&lt;16384; n++){
 var randompixel = Math.floor(Math.random()*(palette.length + 1));
 frame[n] = randompixel;
 }
 }
 
 function DrawFrame() {
 var str = '&lt;table border=1&gt;&lt;tr&gt;n';
 for(n = 0; n &lt; frame.length; n++){
 str += '&lt;td bgcolor="' + palette[frame[n]] + '"&gt;&lt;/td&gt;n';
 curline++;
 pixel++;
 //    document.getElementById("debug2").innerHTML += "#" + palette[frame[n]];
 if(curline &gt;= lines){
 curcol++;
 curline = 0;
 str += '&lt;/tr&gt;&lt;tr&gt;n';
 if(curcol &gt;= columns || pixel &gt;= (lines*columns)){
 str += '&lt;/tr&gt;n&lt;/table&gt;';
 break;
 }
 }
 }
 document.getElementById('debug').innerHTML = str;
 return;
 }
 
 function BegginProgram() {
 WrittePalette();
 WritteFrame();
 DrawFrame();
 }
 onload = function() { BegginProgram(); }
 
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload="BegginProgram();"&gt;
 &lt;div id="debug"&gt;&lt;/div&gt;
 &lt;div id="debug2"&gt;&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@Magnus9998authorJun 11.2011 — #Yup, that works for me. Thank you very much!

So, you put all the code in a string, and then show it inside the div. But, what's the difference between that, and updating the div as I was trying to do?

Oh, and about this line...

[CODE]onload = function() { BegginProgram(); }[/CODE]

Is it needed whenever I want to run a javascript using the "onload" property?

Oh, and that "debug2", is a DIV, different from the first one, used to show the values of the variables.

@JMRKERJun 11.2011 — #Comments in [COLOR="Red"][SIZE="4"]RED [/SIZE][/COLOR]below...
Yup, that works for me. Thank you very much!

So, you put all the code in a string, and then show it inside the div. But, what's the difference between that, and updating the div as I was trying to do?

[COLOR="Red"][SIZE="4"]Faster.

[/SIZE][/COLOR]

Oh, and about this line...

[CODE]onload = function() { BegginProgram(); }[/CODE]
[COLOR="Red"][SIZE="4"]Same as <body onload="BegginProgram()"> you had before.

Advantage is that you can call other functions during the onload

as opposed to only one in the <body> tag.

[/SIZE][/COLOR]

Is it needed whenever I want to run a javascript using the "onload" property?

[COLOR="Red"][SIZE="4"]

"BegginProgram()" only needs to be called if you want to update 'debug' display.

Be careful here as it might get pretty slow with repeated calls.

[/SIZE][/COLOR]

Oh, and that "debug2", is a DIV, different from the first one, used to show the values of the variables.[/QUOTE]
Good Luck!

?

Also in #JavaScript _↴

Exploding list Star-Rating System with corresponding chart displays Checkboxes and TextBoxes...

Success!

Help @Magnus9998 spread the word by sharing this article on Twitter...

Tweet This

Need help displaying tables

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Need help displaying tables

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴