mouldableStudent Posted October 20, 2011 Share Posted October 20, 2011 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 More sharing options...
thescientist Posted October 20, 2011 Share Posted October 20, 2011 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>'; }; }; }; Link to comment Share on other sites More sharing options...
mouldableStudent Posted October 20, 2011 Author Share Posted October 20, 2011 Your algorithm in the if statement is perfect, meanwhile, I shall have a look at the cache DOM references, and toy with the literal syntax.Thank you sir. Link to comment Share on other sites More sharing options...
ShadowMage Posted October 20, 2011 Share Posted October 20, 2011 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 More sharing options...
thescientist Posted October 20, 2011 Share Posted October 20, 2011 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 More sharing options...
ShadowMage Posted October 20, 2011 Share Posted October 20, 2011 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 More sharing options...
thescientist Posted October 20, 2011 Share Posted October 20, 2011 ah! got me! Link to comment Share on other sites More sharing options...
mouldableStudent Posted October 20, 2011 Author Share Posted October 20, 2011 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 More sharing options...
ShadowMage Posted October 21, 2011 Share Posted October 21, 2011 Another small oversight (by scientist and me ). 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.