javascript if statement to do-while

Question

I am trying to get this snip of code to work in a while loop instead of an if. I need each instant of num_# to not be displayed if the printLoad_# val is empty. So if printLoad_1 value = nothing, the Num_1 would not be displayed, and then the printLoad_2 would check to see if its num_2 is empty and so on. The problem I am having is the function stops before checking each section. Im not sure if a do-while will work.

$(document).ready(function() {
 if(document.getElementById("printLoad_1").value == "")
 {
 document.getElementById('num_1').style.display = 'none';
 }
 if(document.getElementById("printLoad_2").value == "")
 {
 document.getElementById('num_2').style.display = 'none';
 }
 if(document.getElementById("printLoad_3").value == "")
 {
 document.getElementById('num_3').style.display = 'none';
 }
 if(document.getElementById("printLoad_4").value == "")
 {
 document.getElementById('num_4').style.display = 'none';
 }
 if(document.getElementById("printLoad_5").value == "")
 {
 document.getElementById('num_5').style.display = 'none';
 }
});

• Hamish: Is your question "how do I use a while loop" or is it "what's wrong with my code"?
• user2089255: its a bit of both, sorry
• Hamish: well, do you get any errors?
• elclanrs: Diagnosis: seems like a case of iditis. Use common classes, and target elements by index, it'll be much simpler.
• user2089255: iditis? More like inexperience. Thanks anyways...

Answer 1

Have you considered just compositing the strings instead of this verbose construction? Something like this:

for( var i=1; i<=5; i++ ) {
 if( document.getElementById('printLoad_'+i).value === '' ) {
 document.getElementById('num_'+i).style.display = 'none';
 }
}

• user2089255: This actually works for the inputs, but I am having trouble getting this to work dynamically. I will use what you have given me and try to come up with another question that builds off this one. Thanks!
• HMR: @user2089255 If by dynamic you mean a variable amount of inputs then look at my answer.

Answer 2

Assuming you're using jQuery and that your elements are in order, I'd forget about ID's. If you use common classes, say .printload and .num, then you can easily target elements by index like:

$('.printload').each(function(i){
 if (!this.value) $('.num').eq(i).hide();
});

• HMR: @user2089255 note that printLoad and num is the class of the element.
• Mike Brant: Yes. When using jQuery, anytime you see the id="*_#" type constructs, you can almost always do this better using classes instead of (or in addition to) id's.

Answer 3

if you have a variable amount of printLoad and num:

var i = 1,
pl=document.getElementById('printLoad_'+i),
num = document.getElementById('num_'+i);
while(pl !== null && num !== null){
 if(pl.value === ""){
 num.style.display = 'none';
 }
 i++;
 pl=document.getElementById('printLoad_'+i),
 num = document.getElementById('num_'+i);
}

• user2089255: Well this works too, same problem I am having with other working script. I think I have my code in an incorrect place. Ill move things around and see.

Answer 4

Here is a slight modification of Ethan's answer that "works dynamically". I've also updated it to use jQuery. This could be handled cleaner if CSS classes and a hierarchy relationship were used, but that would affect how the DOM needed to be generated ..

for (var i = 1; /* break */; i++) {
 var printEl = $('#printLoad_' + i)
 if (printEl.length) {
 if (!printEl.val()) {
 $('#num_' + i).css({display: 'none'})
 }
 } else {
 // No #printLoad_N, guess we're done looking
 break
 }
}

Answer 5

Per @elclanr 's answer:

Use common classes, and target elements by index, it'll be much simpler.

Set your "printLoad" elements to class='printLoad' and your "num" elements to class='num'. Then...

for (i=0;i<document.getElementByClass('printLoad').length;i++)
{
 if (document.getElementByClass('printLoad')[i].value == "")
 {
 document.getElementByClass('num')[i].style.display='none';
 }
}