Jump to content

Displaying An Array In Rows And Columns


mouldableStudent
 Share

Recommended Posts

Hey all, I apologise if this is a repeat topic, I have checked and didn't find anything similar. I've just written this code:

<head><script>var x = new Array('0','1','2','3','4','5','6','7','8','9');function func() {  for(i=0; i<x.length; i++){  document.getElementById('output').innerHTML += x[i] + ' ';	 if(i==2 || i==5 || i==8){	 document.getElementById('output').innerHTML += '<br>';	 }  }}</script></head><body onLoad="func()"><div id="output"></div></body>

I'm wondering if there is an easier way to partition the array rather than using an if statement?

Link to comment
Share on other sites

not really, but you could simply the if statement somewhat

if((i+1) % 3 === 0){  //special case here};

because from the looks of it, you want it to "break" after every third index. also, it's best practice to cache DOM references, and javascript supports literal syntax. plus a couple other little optimizers in there for ya. i.e.

var x = ['0','1','2','3','4','5','6','7','8','9'];var output = document.getElementyId('output'); function func() {    for(i=0, l = x.length; i < l; i++){   var idx = x[i];   output.innerHTML += idx + ' ';	    if((i+1) % 3 === 0)){		 output.innerHTML += '<br>';	   };    }; };

Edited by thescientist
Link to comment
Share on other sites

Is there any benefit to putting the output in a string before actually adding it to the element? Ie,

function func() {   var str = '';   for(i=0, l = x.length; i < l; i++){	  var idx = x[i];	  str += idx + ' ';	   	  if((i+1) % 3 === 0)){		 str += '<br>';    	  };   };   output.innerHTML += str;};

I seem to recall reading something about the browser "repainting" the page every time the DOM is updated....but that statement could be wrong.

Link to comment
Share on other sites

Is there any benefit to putting the output in a string before actually adding it to the element? Ie,
function func() {   var str = '';   for(i=0, l = x.length; i < l; i++){	  var idx = x[i];	  str += idx + ' ';	   	  if((i+1) % 3 === 0)){		 str += '<br>';		  };   };   output.innerHTML += str;};

I seem to recall reading something about the browser "repainting" the page every time the DOM is updated....but that statement could be wrong.

yes, you're right, that would be better.
Link to comment
Share on other sites

And while we're on the topic of optimization, let's also add the 'var' keyword to the for loop, so the variables are declared locally and don't leak up through the scope:

for (var i=0, l=x.length; i<l; i++) {

Link to comment
Share on other sites

Cheers both, I've toyed with everything you've said and the only problem I found was with what thescientist said in the first place, but it's nothing serious, simply:

var output = document.getElementById('output');

only helps if declared within the function. I tried and I tried but it didn't work any other way.

Link to comment
Share on other sites

Another small oversight (by scientist and me :P ). Since your code is in the head of the document, it will run as the page is loading. If you put that line in the global space (ie, outside of any functions) it will try to access the 'output' element before it is created. You need to either keep that line inside the function, or assign the value of output in an onload handler, which would be something like:

var output; //Keep the declaration in the global space window.onload = function() {   output = document.getElementById('output'); //Assign the value in the window.onload handler}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...