For loop loses variable value after first loop

Question

Apologies if my question title is not accurate, I couldn't think how to phrase it.

var options = [2,3,4]
// select drop down
var select = document.getElementById("itemSet");

for (var i = 0; i < options.length; i++) {
  var opt = options[i];
  var el = document.createElement("option");

  el.text = opt;
  el.value = opt;
  select.add(el);
}

// define arrays
var arrActivity = ["alien monster", "man in business suit levitating", "fencer", "horse racing", "skier", "snowboarder", "golfer", "surfer", "rowboat", "swimmer"];
var arrFood = ["grapes", "melon", "watermelon", "tangerine", "lemon", "banana", "pineapple", "red apple", "green apple", "pear"];
var arrObjects = ["skull and crossbones", "love letter", "bomb", "hole", "shopping bags", "prayer beads", "gem stone", "hocho", "amphora", "world map"];
var arrLetters = ["letter a", "letter b", "letter c", "letter d", "letter e", "letter f", "letter g", "letter h", "letter i", "letter j"];


// format the array data for output into the textarea
function boom() {

  var e = document.getElementById("itemSet");
  var myCols = e.options[e.selectedIndex].value;
  console.log(myCols);

  var arrNew = [];

  if (document.getElementById("radioActivity").checked) {
    y = arrActivity;
  } else if (document.getElementById("radioFood").checked) {
    y = arrFood;
  } else if (document.getElementById("radioObjects").checked) {
    y = arrObjects;
  } else if (document.getElementById("radioLetters").checked) {
    y = arrLetters;
  }

  for (var i = 0; i < y.length; i += myCols) {
    arrNew.push(
      y.slice(i, i + myCols)
    );
  }

  // set the textarea output
  op = JSON.stringify(arrNew, null, 4);
  document.getElementById('output').value = op;
}

<form onSubmit="return false;">

  <label class="radio-inline">
   <input type="radio" name="myArray" id="radioActivity" value="valActivity"> Activity
  </label>

  <label class="radio-inline">
   <input type="radio" name="myArray" id="radioFood" value="arrFood"> Food
  </label>

  <label class="radio-inline">
   <input type="radio" name="myArray" id="radioObjects" value="arrObjects"> Objects
  </label>

  <label class="radio-inline">
   <input type="radio" name="myArray" id="radioLetters" value="arrLetters"> Letters
  </label>

  <select class="form-control" id="itemSet" name="itemSet"></select>

  <button onClick="boom();"> Check Radio </button>

  <textarea id="output" class="form-control" style="width:95%; height:500px; margin-top:20px;"></textarea>

</form>

When I click the "Check Radio" button, I want to reformat the arrays into chunks using this for loop:

        for (var i = 0; i < y.length; i+=myCols) {
            arrNew.push(
                y.slice(i, i+myCols)
            );
        }

If I submit the form with a select value of e.g. 2 then the array is reformatted as:

[
    [
        "alien monster",
        "man in business suit levitating"
    ],
    [
        "fencer",
        "horse racing",
        "skier",
        "snowboarder",
        "golfer",
        "surfer",
        "rowboat",
        "swimmer"
    ]
]

Instead of in chunks of 2:

[
    [
        "alien monster",
        "man in business suit levitating"
    ],
    [
        "fencer",
        "horse racing"
    ],
    [
        "skier",
        "snowboarder"
    ],
    [
        "golfer",
        "surfer"
    ],
    [
        "rowboat",
        "swimmer"
    ]
]

This CodePen demonstrates the issue: https://codepen.io/paperknees/pen/boXjXW

I can't work out what I'm doing wrong.

`myCols` is a string, `i += myCols` produces `02`, `022` etc. Convert the value to a number before doing math with it. — Teemu, Oct 26 '17 at 07:08
slice won't work here, instead, referring this may help - https://stackoverflow.com/questions/8188548/splitting-a-js-array-into-n-arrays — Tushar Walzade, Oct 26 '17 at 07:11
@TusharWalzade Why wont it work? If `myCols` would be a string it would work just fine. — Ivar, Oct 26 '17 at 07:13
FYI: `e.options[e.selectedIndex].value` can be simplified to just `e.value`. — Barmar, Oct 26 '17 at 07:20

score 4 · Accepted Answer · answered Oct 26 '17 at 07:08

4

myCols is a string, therefore

y = 0;
myCols = "2"
//first iteration
y += myCols // "2"
//second iteration:
y += myCols // "22"

To solve this, add an unary plus operator:

var myCols =  +e.options[e.selectedIndex].value;

answered Oct 26 '17 at 07:08

Jonas Wilms

132,000
20
149
151

score 1 · Answer 2 · answered Oct 26 '17 at 07:17

1

You'll get it here -

while (y.length > 0)
    arrNew.push(y.splice(0, myCols))
console.log(arrNew);

That's it!

answered Oct 26 '17 at 07:17

Tushar Walzade

3,737
4
33
56

Please do note that this will edit your `y` array. After the array your `y` will be empty. – Ivar Oct 26 '17 at 07:24
Yeah, it's true. But, if we need it further, we can back it up as - `var z = y.slice(0);` before processing it. – Tushar Walzade Oct 26 '17 at 07:32

For loop loses variable value after first loop

2 Answers2