Javascript：在输入框上获取未定义，范围从 0 到 10答案

【问题标题】：Javascript: Getting undefined on input box that takes a range from 0 to 10Javascript：在输入框上获取未定义，范围从 0 到 10
【发布时间】：2016-08-29 02:11:47
【问题描述】：

我有两个按钮（+ 和 -）和一个值为 10 的输入框。输入必须只取 0 到 10 之间的值，我无法弄清楚为什么在我到达之后我会变得未定义输入框上的 0 或 10。我尝试使用 parseInt 作为值。但也许我没有在正确的地方做这件事。非常感谢您的帮助。

var fighterScore1 = document.getElementById("fighterScore1");
fighterScore1.value  = 10;
var fighter1Inc = document.getElementById("fighter1Inc");
var valor = 10;

	fighter1Inc.onclick = function (valor) {
		fighterScore1.value = increaseValue(valor);
	};
	fighter1Dec.onclick = function (valor) {
		fighterScore1.value = decreaseValue(valor.value);
	};
  function decreaseValue() {
		if (valor <= 0 ) {

	    } else {
	    valor--;
	    	return valor;
	    }
	};
	function increaseValue() {
		if (valor >= 10 ) {
	    	valor = 10;
	    } else {
	    valor++;
	    	valor = valor;
	    	return valor;
	    }
	    
	};

<div id="rwid1">
			<button id="fighter1Inc">+</button>
			<input type="text" id="fighterScore1" maxlength="10" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
			<button id="fighter1Dec">-</button>
		</div><!--/rwid-->

【问题讨论】：

您将参数传递给 increaseValue 但函数本身不接受参数？

标签： javascript undefined counter inputbox

【解决方案1】：

问题是你只在小于 10 或大于 0 的条件内返回。如果你没有在一个条件下返回，则没有返回值，所以你最终将 undefined 分配给一个变量。 Here 是一个固定的 JSFiddle。您必须在 if 语句之外返回，并且 valor.value 不存在。

var fighterScore1 = document.getElementById("fighterScore1");
fighterScore1.value  = 10;
var fighter1Inc = document.getElementById("fighter1Inc");
var valor = 10;

fighter1Inc.onclick = function (valor) {
	fighterScore1.value = increaseValue();
};

fighter1Dec.onclick = function (valor) {
	fighterScore1.value = decreaseValue();
};

function decreaseValue() {
	if (valor <= 0 ) {
        valor = 0;
	} else {
	    valor--;
	}
	return valor;
};

function increaseValue() {
	if (valor >= 10 ) {
	    valor = 10;
	} else {
	    valor++;
	}
    return valor;
};

<div id="rwid1">
	<button id="fighter1Inc">+</button>
	<input type="text" id="fighterScore1" maxlength="10" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
	<button id="fighter1Dec">-</button>
</div><!--/rwid-->

注意：您将参数传递给不接受任何参数的函数（JS 接受不同数量的参数，即使您没有指定）。要么删除带参数的调用，要么使用参数并将其传入，使用参数代替 valor。

【讨论】：

太棒了。我明白了，我确定我在 if 语句中返回值。感谢您的解释。现在对我来说很有意义。
没问题！如果您还需要什么，请告诉我！

【解决方案2】：

当valor <= 0 或valor >= 10 时，您实际上并没有在分支中返回任何值。如果您忘记在 JavaScript 中返回一个值，您将在函数末尾得到一个 隐式返回，其值为 undefined。

要解决此问题，只需在函数末尾或 if/else 的每个分支中添加 valor 的 return 语句即可。

例如

function decreaseValue() {
    if (valor <= 0 ) {
         return 0;
    }
    else {
        return valor - 1;
    }
}

【讨论】：

【解决方案3】：

您的代码的问题在于，并非incriseValue 和decreaseValue 中的所有路径都会返回某些内容。这意味着return undefined;。此外（祝你好运）incriseValue 和 decreaseValue 不要使用参数并使用全局 varlor。这是固定代码。

var fighterScore1 = document.getElementById("fighterScore1");
fighterScore1.value = 10;
var fighter1Inc = document.getElementById("fighter1Inc");
var valor = 10;
var fighter1Dec = document.getElementById("fighter1Dec");

fighter1Inc.onclick = function() {
  fighterScore1.value = increaseValue();
};
fighter1Dec.onclick = function() {
  fighterScore1.value = decreaseValue();
};

function decreaseValue() {
  if (valor > 0)
    valor--;
  return valor;
};

function increaseValue() {
  if (valor < 10)
    valor++;
  return valor;

};

<div id="rwid1">
  <button id="fighter1Inc">+</button>
  <input type="text" id="fighterScore1" maxlength="10" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
  <button id="fighter1Dec">-</button>
</div>
<!--/rwid-->

【讨论】：