For loop loses variable value after first loop [duplicate]

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
– Teemu, Commented Oct 26, 2017 at 7:08
slice won't work here, instead, referring this may help - stackoverflow.com/questions/8188548/… — Tushar Walzade
– Tushar Walzade, Commented Oct 26, 2017 at 7:11
@TusharWalzade Why wont it work? If myCols would be a string it would work just fine. — Ivar
– Ivar, Commented Oct 26, 2017 at 7:13
FYI: e.options[e.selectedIndex].value can be simplified to just e.value. — Barmar
– Barmar, Commented Oct 26, 2017 at 7:20

Jonas Wilms · Accepted Answer · 2017-10-26 07:08:33Z

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, 2017 at 7:08

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tushar Walzade · Accepted Answer · 2017-10-26 07:17:23Z

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, 2017 at 7:17

Tushar Walzade

3,8274 gold badges38 silver badges60 bronze badges

2 Comments

Ivar Over a year ago

Please do note that this will edit your y array. After the array your y will be empty.

Tushar Walzade Over a year ago

Yeah, it's true. But, if we need it further, we can back it up as - var z = y.slice(0); before processing it.

Collectives™ on Stack Overflow

For loop loses variable value after first loop [duplicate]

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related