Simply using a loop 1

[TheCandyman]

How can i simplify this into a loop? The 'if else' goes on for 10 times!

if(NumBooths == 1)
				{ document.getElementById('Booth2').style.display= 'none';
				  document.getElementById('codes2').style.display= 'none';
				  document.getElementById('Booth3').style.display= 'none';
				  document.getElementById('codes3').style.display= 'none';
				  document.getElementById('Booth4').style.display= 'none';
				  document.getElementById('codes4').style.display= 'none';
				  document.getElementById('Booth5').style.display= 'none';
				  document.getElementById('codes5').style.display= 'none';
				  document.getElementById('Booth6').style.display= 'none';
				  document.getElementById('codes6').style.display= 'none';
				  document.getElementById('Booth7').style.display= 'none';
				  document.getElementById('codes7').style.display= 'none';
				  document.getElementById('Booth8').style.display= 'none';
				  document.getElementById('codes8').style.display= 'none';
				  document.getElementById('Booth9').style.display= 'none';
				  document.getElementById('codes9').style.display= 'none';
				  document.getElementById('Booth10').style.display= 'none';
				  document.getElementById('codes10').style.display= 'none';}

else if(NumBooths == 2)
				{ document.getElementById('Booth2').style.display= '';
				  document.getElementById('codes2').style.display= '';
				  document.getElementById('Booth3').style.display= 'none';
				  document.getElementById('codes3').style.display= 'none';
				  document.getElementById('Booth4').style.display= 'none';
				  document.getElementById('codes4').style.display= 'none';
				  document.getElementById('Booth5').style.display= 'none';
				  document.getElementById('codes5').style.display= 'none';
				  document.getElementById('Booth6').style.display= 'none';
				  document.getElementById('codes6').style.display= 'none';
				  document.getElementById('Booth7').style.display= 'none';
				  document.getElementById('codes7').style.display= 'none';
				  document.getElementById('Booth8').style.display= 'none';
				  document.getElementById('codes8').style.display= 'none';
				  document.getElementById('Booth9').style.display= 'none';
				  document.getElementById('codes9').style.display= 'none';
				  document.getElementById('Booth10').style.display= 'none';
				  document.getElementById('codes10').style.display= 'none';}

else if(NumBooths == 3)
				{ document.getElementById('Booth2').style.display= '';
				  document.getElementById('codes2').style.display= '';
				  document.getElementById('Booth3').style.display= '';
				  document.getElementById('codes3').style.display= '';
				  document.getElementById('Booth4').style.display= 'none';
				  document.getElementById('codes4').style.display= 'none';
				  document.getElementById('Booth5').style.display= 'none';
				  document.getElementById('codes5').style.display= 'none';
				  document.getElementById('Booth6').style.display= 'none';
				  document.getElementById('codes6').style.display= 'none';
				  document.getElementById('Booth7').style.display= 'none';
				  document.getElementById('codes7').style.display= 'none';
				  document.getElementById('Booth8').style.display= 'none';
				  document.getElementById('codes8').style.display= 'none';
				  document.getElementById('Booth9').style.display= 'none';
				  document.getElementById('codes9').style.display= 'none';
				  document.getElementById('Booth10').style.display= 'none';
				  document.getElementById('codes10').style.display= 'none';}
...
...
...

 

[vacunita]

Something like the following will not only loop the display none settings, but it will also get rid of all your If else statements by looping the ones that should be shown:

  var boothsID="";
  var codesID="";

  for(var i=2; i<=10; i++){
  
    boothsID="Booth"+ i;
    codesID="codes"+ i;
    document.getElementById(boothsID).style.display= 'none';
    document.getElementById(codesID).style.display= 'none';
  }
    
  for(var j=2;j<=NumBooths;j++){
    document.getElementById("Booth"+j).style.display= '';
    document.getElementById("codes"+j).style.display= '';
  }

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[TheCandyman]

Thanks vacunita,

Simple question, on one loop you use this:
boothsID="Booth"+ i;
...getElementById(boothsID)...


On the second loop you use this:
..getElementById("Booth"+j)



Is one method better then the other? I don't see the 'why' in these two uses, but I'm not a JavaScript expert by any means.

 

[vacunita]

They are pretty much the same, though the second method dispenses with creating an additional variable, and simply builds the Id directly inside the getElementById function.


You can use whichever method you prefer.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/