javascript - For 循环在第一次循环后丢失变量值

Question

如果我的问题标题不准确，我很抱歉，我不知道如何表达它。

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>

当我单击“检查单选”按钮时，我想使用此 for 循环将数组重新格式化为 block :

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

如果我提交带有选择值的表单，例如2 然后数组被重新格式化为:

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

而不是2 block :

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

此 CodePen 演示了该问题:https://codepen.io/paperknees/pen/boXjXW

我无法弄清楚我做错了什么。

Answer 1

myCols 是一个字符串，因此

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

要解决此问题，请添加一元加运算符:

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