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

问题是你只是 return 小于 10 或大于 0 的条件。如果你不 return 在一个条件下，就没有return 值，所以你最终将 undefined 分配给一个变量。 Here 是一个固定的 JSFiddle。您必须 return 在 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-->

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

Answer 2

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

要解决此问题，只需在函数末尾或 if/else.[= 的每个分支中为 valor 添加 return 语句18=]

例如

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

Answer 3

您的代码的问题是，并非 incriseValue 和 decreaseValue return 中的所有路径。意思是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-->

Javascript: 在取值范围为 0 到 10 的输入框上获取未定义

Javascript: Getting undefined on input box that takes a range from 0 to 10

javascript

counter

undefined

inputbox