从函数获取返回值的麻烦

时间:2018-11-17 20:09:55

标签: javascript html function

下面是我的项目的一小段内容,我使这些功能合而为一,但是当我为程序修改其他功能时,下面的代码停止了工作。

我想做的是从用户(例如Jan)获取一个输入对象daysInMonth数组中的标签之一,然后从中返回对象的值以及该对象在数组中的索引

我的问题是,当我使用Jan作为示例时,即使在getMonthNum函数内部它返回31,当我在DrawCal()内部调用getMonthNum()以获取returnMonDayNum的值时仍返回0。

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>

2 个答案:

答案 0 :(得分:2)

您正在尝试从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>

答案 1 :(得分:1)

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>