Javascript:当输入框的取值范围从0到10时，未定义

Question

我有两个按钮(+和-)和一个值为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-->

Answer 1

问题是，您只在小于10或大于0的条件下返回。如果您没有在一个条件中返回，则没有返回值，因此您最终将undefined分配给一个变量。这是一个固定的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。

Answer 2

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

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

例如

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

Answer 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-->