从函数中获取返回值的麻烦

Question

下面是我的项目的一小部分，我让这些功能一对一工作，但当我修改其他功能到我的程序时，下面的代码停止工作。

我要做的是从用户（例如Jan）获取对象数组中的一个标签daysInMonth，然后从该返回对象的值以及该对象在数组中的索引。

我的问题是当我在DrawCal（）内调用getMonthNum（）来获取returnMonDayNum的值时返回0，即使在getMonthNum函数内它返回31，如果你使用Jan作为例子。

var daysInMonth = [{
    label: 'Jan',
    value: 31
  }, {
    label: 'Feb',
    value: 28
  }, {
    label: 'Marc',
    value: 31
  }, {
    label: 'Apr',
    value: 30
  },
  {
    label: 'May',
    value: 31
  }, {
    label: 'June',
    value: 30
  }, {
    label: 'July',
    value: 31
  }, {
    label: 'Aug',
    value: 31
  },
  {
    label: 'Sept',
    value: 30
  }, {
    label: 'Oct',
    value: 31
  }, {
    label: 'Nov',
    value: 30
  }, {
    label: 'Dec',
    value: 31
  }
]


function getMonthNum() {

  var monInput = document.getElementById("month").value;

  for (var i = 0; i <= 11; i++) {
    if (daysInMonth[i].label == monInput) {
      var returnMonDayNum = daysInMonth[i].value;
      var returnMonNum = i;
      console.log(monInput);
      console.log(returnMonDayNum);
      console.log(i);
      return returnMonDayNum, returnMonNum;
    }
  }
}


function DrawCal() {

  var returnMonDayNum = getMonthNum(returnMonDayNum);
  console.log(returnMonDayNum);
}

<form action="#" onsubmit="DrawCal();">
  <label>Month: <input type="text" name="Enter Month" id="month" required></label>
  <br>
  <br>
  <input type="submit" value="MakeCal">
</form>

Answer 1

你试图从getMonthNum返回两件事。如果您确实想要返回索引和天数，则应将它们放在数组中。否则你只会得到列表中的最后一个。

然后，您可以在阵列中引用所需的项目。

作为旁注，您可能会发现像find()和findIndex()这样的数组函数比for循环更好一些。 （我还添加了stopDefault（），只是为了防止表单刷新，结果保留在控制台中 - 这可能不是你想要的实际代码）。

var daysInMonth = [{label: 'Jan',value: 31}, {label: 'Feb',value: 28}, {label: 'Marc',value: 31}, {label: 'Apr',value: 30},{label: 'May',value: 31}, {label: 'June',value: 30}, {label: 'July',value: 31}, {label: 'Aug',value: 31},{label: 'Sept',value: 30}, {label: 'Oct',value: 31}, {label: 'Nov',value: 30}, {label: 'Dec',value: 31}]

function getMonthNum() {

  var monInput = document.getElementById("month").value;

  for (var i = 0; i <= 11; i++) {
    if (daysInMonth[i].label == monInput) {
      var returnMonDayNum = daysInMonth[i].value;
      var returnMonNum = i;
      console.log("input:", monInput);
      console.log("days:",returnMonDayNum);
      console.log("i:",i);
      return [returnMonDayNum, returnMonNum];
    }
  }
}


function DrawCal(e) {
  e.preventDefault()
  var result = getMonthNum();
  // result is an array: [returnMonDayNum, returnMonNum]
  console.log("days:", result[0]);
}

<form action="#" onsubmit="DrawCal(event);">
  <label>Month: <input type="text" name="Enter Month" id="month" required></label>
  <br>
  <br>
  <input type="submit" value="MakeCal">
</form>

Answer 2

var daysInMonth = [{
    label: 'Jan',
    value: 31
  }, {
    label: 'Feb',
    value: 28
  }, {
    label: 'Marc',
    value: 31
  }, {
    label: 'Apr',
    value: 30
  },
  {
    label: 'May',
    value: 31
  }, {
    label: 'June',
    value: 30
  }, {
    label: 'July',
    value: 31
  }, {
    label: 'Aug',
    value: 31
  },
  {
    label: 'Sept',
    value: 30
  }, {
    label: 'Oct',
    value: 31
  }, {
    label: 'Nov',
    value: 30
  }, {
    label: 'Dec',
    value: 31
  }
]


function getMonthNum() {

  var monInput = document.getElementById("month").value;

  var returnMonDayNum
  var returnMonNum

  for (var i = 0; i <= 11; i++) {
    if (daysInMonth[i].label === monInput) {
      returnMonDayNum = daysInMonth[i].value;
      returnMonNum = i;
    }
  }
  return `Month: ${returnMonNum}. Days in ${daysInMonth[returnMonNum].label}: ${returnMonDayNum}`
}


function DrawCal() {

  console.log(getMonthNum());
}

document.querySelector('.submit').addEventListener('click', DrawCal)

<label>Month: <input type="text" name="Enter Month" id="month" required></label>

<button class="submit" value="MakeCal">Submit</button>