Converting if...else statement into for-loop

Question

I have one generous piece of code with several if...else statements and I would need to convert this into a loop. The problem is, each time it makes a loop, there must be some different id to the function so it works properly.

Let's take a look at the code:

// Count how many inputs there are in element with id "tempResult"
var inputCount = document.getElementById('tempResult').getElementsByTagName('input').length;


if (inputCount == 1)  // if there is 1 input, generate 1 line
{
  var str = document.getElementById('tempString1').value;
  var arrayOfStrings1 = str.split('*');
  for(var i = 0; i < arrayOfStrings1.length; i++)
  {
    var div1 = document.getElementById('div1');
    var mi1 = document.createElement('input');
    mi1.setAttribute('type', 'text');
    mi1.setAttribute('size', '5');
    mi1.setAttribute('id', 'string1' + (i+1));
    mi1.setAttribute('value', arrayOfStrings1[i]);
    div1.appendChild(mi1);
  }
}
else if (inputCount == 2) // if there are 2 inputs, generate 2 lines
{
  var str = document.getElementById('tempString1').value;
  var arrayOfStrings1 = str.split('*');
  for(var i = 0; i < arrayOfStrings1.length; i++)
  {
    var div1 = document.getElementById('div1');
    var mi1 = document.createElement('input');
    mi1.setAttribute('type', 'text');
    mi1.setAttribute('size', '5');
    mi1.setAttribute('id', 'string1' + (i+1));
    mi1.setAttribute('value', arrayOfStrings1[i]);
    div1.appendChild(mi1);
  }


  var str = document.getElementById('tempString2').value;
  var arrayOfStrings2 = str.split('*');
  for(var i = 0; i < arrayOfStrings2.length; i++)
  {
    var div2 = document.getElementById('div2');
    var mi2 = document.createElement('input');
    mi2.setAttribute('type', 'text');
    mi2.setAttribute('size', '5');
    mi2.setAttribute('id', 'string2' + (i+1));
    mi2.setAttribute('value', arrayOfStrings2[i]);
    div2.appendChild(mi2);
  }
}
else if (inputCount == 3) // if there are 3 inputs, generate 3 lines
{
  var str = document.getElementById('tempString1').value;
  var arrayOfStrings1 = str.split('*');
  for(var i = 0; i < arrayOfStrings1.length; i++)
  {
    var div1 = document.getElementById('div1');
    var mi1 = document.createElement('input');
    mi1.setAttribute('type', 'text');
    mi1.setAttribute('size', '5');
    mi1.setAttribute('id', 'string1' + (i+1));
    mi1.setAttribute('value', arrayOfStrings1[i]);
    div1.appendChild(mi1);
  }


  var str = document.getElementById('tempString2').value;
  var arrayOfStrings2 = str.split('*');
  for(var i = 0; i < arrayOfStrings2.length; i++)
  {
    var div2 = document.getElementById('div2');
    var mi2 = document.createElement('input');
    mi2.setAttribute('type', 'text');
    mi2.setAttribute('size', '5');
    mi2.setAttribute('id', 'string2' + (i+1));
    mi2.setAttribute('value', arrayOfStrings2[i]);
    div2.appendChild(mi2);
  }


  var str = document.getElementById('tempString3').value;
  var arrayOfStrings3 = str.split('*');
  for(var i = 0; i < arrayOfStrings3.length; i++)
  {
    var div3 = document.getElementById('div3');
    var mi3 = document.createElement('input');
    mi3.setAttribute('type', 'text');
    mi3.setAttribute('size', '5');
    mi3.setAttribute('id', 'string3' + (i+1));
    mi3.setAttribute('value', arrayOfStrings3[i]);
    div3.appendChild(mi3);
  }
}
else if (inputCount == 4) // if there are 4 inputs, generate 4 lines
{
  var str = document.getElementById('tempString1').value;
  var arrayOfStrings1 = str.split('*');
  for(var i = 0; i < arrayOfStrings1.length; i++)
  {
    var div1 = document.getElementById('div1');
    var mi1 = document.createElement('input');
    mi1.setAttribute('type', 'text');
    mi1.setAttribute('size', '5');
    mi1.setAttribute('id', 'string1' + (i+1));
    mi1.setAttribute('value', arrayOfStrings1[i]);
    div1.appendChild(mi1);
  }


  var str = document.getElementById('tempString2').value;
  var arrayOfStrings2 = str.split('*');
  for(var i = 0; i < arrayOfStrings2.length; i++)
  {
    var div2 = document.getElementById('div2');
    var mi2 = document.createElement('input');
    mi2.setAttribute('type', 'text');
    mi2.setAttribute('size', '5');
    mi2.setAttribute('id', 'string2' + (i+1));
    mi2.setAttribute('value', arrayOfStrings2[i]);
    div2.appendChild(mi2);
  }


  var str = document.getElementById('tempString3').value;
  var arrayOfStrings3 = str.split('*');
  for(var i = 0; i < arrayOfStrings3.length; i++)
  {
    var div3 = document.getElementById('div3');
    var mi3 = document.createElement('input');
    mi3.setAttribute('type', 'text');
    mi3.setAttribute('size', '5');
    mi3.setAttribute('id', 'string3' + (i+1));
    mi3.setAttribute('value', arrayOfStrings3[i]);
    div3.appendChild(mi3);
  }


  var str = document.getElementById('tempString4').value;
  var arrayOfStrings4 = str.split('*');
  for(var i = 0; i < arrayOfStrings4.length; i++)
  {
    var div4 = document.getElementById('div4');
    var mi4 = document.createElement('input');
    mi4.setAttribute('type', 'text');
    mi4.setAttribute('size', '5');
    mi4.setAttribute('id', 'string4' + (i+1));
    mi4.setAttribute('value', arrayOfStrings4[i]);
    div4.appendChild(mi4);
  }
}

As you can see, we repeat a certain amount of time the same function depending on how much inputs we have in the div tempResult:

var str = document.getElementById('tempStringX').value;
  var arrayOfStringsX = str.split('*');
  for(var i = 0; i < arrayOfStringsX.length; i++)
  {
    var divX = document.getElementById('divX');
    var miX = document.createElement('input');
    miX.setAttribute('type', 'text');
    miX.setAttribute('size', '5');
    miX.setAttribute('id', 'stringX' + (i+1));
    miX.setAttribute('value', arrayOfStringsX[i]);
    divX.appendChild(miX);
  }

The X, replaced by numbers each time, are important, the function will not properly work without it (except for the divX, I could generate the inputs inside the same div, but whatever). The above code is working perfectly.

What I'm trying to do, is to use a for() instead of if...else(), so that I don't need to manually edit the code each time we add a new div. I'm not very familiar with for() and my tries with the already existing ones in my code as models were not successful.

Here's how the HTML looks like:

<div id="tempResult">
    <input type="text" id="tempString1" value="valueTempString1" />
    <input type="text" id="tempString2" value="valueTempString2" />
    <input type="text" id="tempString3" value="valueTempString3" />
    <input type="text" id="tempString4" value="valueTempString4" />
</div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>

And if you wonder what this whole code is doing, explanation's here. Thanks :)

score 1 · Accepted Answer · answered Sep 30 '14 at 00:45

The if loops in the code you posted would be used as a for loop. i.e, you would be iterating the same times the input count would be. So you can condense the same code into this.

var inputCount = document.getElementById('tempResult')
                         .getElementsByTagName('input').length;

// First loop that iterates over the input count
for (var j = 1; j <= inputCount; j++) {
    var str = document.getElementById('tempString' + j).value,
        arrayOfStrings = str.split('*');
    // Second loop would iterate over the strings that would be split
    for (var i = 0; i < arrayOfStrings.length; i++) {
        var div = document.getElementById('div' + j);
        var mi = document.createElement('input');
        mi.setAttribute('type', 'text');
        mi.setAttribute('size', '5');
        mi.setAttribute('id', 'string' + j + '-' + (i + 1));
        mi.setAttribute('value', arrayOfStrings[i]);
        div.appendChild(mi);
    }
}

Nathan Parker · Answer 2 · 2014-09-30T00:30:12.467

0

Why do you want the variable to have the number of the item? You could run all code inside the for statement and the variable name doesn't have to change.

thisdiv = document.getElementById('div'+i);
thisdiv....all changes to thisdiv go here

edited Sep 30 '14 at 00:30

answered Sep 30 '14 at 00:22

Nathan Parker

308
2
14

Thanks. Can it interfer with the `i` I already use inside the function? For example in the line 7 `for(var i = 0; i < arrayOfStrings1.length; i++)`. Because this loop generates more than the amount of `inputs` in the div `tempResult`, so the `i` will not have the same value. Sorry if the question semes stupid, as I said I'm not familiar with loops. – Orphal Sep 30 '14 at 00:31
Yes please, because I'm struggling to understand how to get the final result. Thanks for your help. – Orphal Sep 30 '14 at 00:38
Seems he beat me up. Glad you got an answer! – Nathan Parker Sep 30 '14 at 00:52

Converting if...else statement into for-loop

2 Answers2