Javascript 递增超过一答案

【问题标题】：Javascript incrementing by more than oneJavascript 递增超过一
【发布时间】：2016-09-25 05:12:04
【问题描述】：

var x1 = document.getElementById("x1");    
var x2 = document.getElementById("x2");

function ThisEvent(){// needs a lot of work done to it
  if (x1.value==1) {
    x2.value--;
  } else if (x1.value==2) {
    x2.value++;
  } else if (x1.value==3) {
    x2.value+=5;
  }
}

<input type="text" value="0" id="x1" onblur="ThisEvent()"> x1     </br>   
<input type="text" value="0" id="x2"> x2

现在发生的事情是当输入 3 时，如果 x1，则添加数字而不是递增。你如何让它增加不止一个，而不将它作为一个数字添加？

【问题讨论】：

不确定预期的结果是什么？
提示：不是数字而是字符串。
预期结果是如果一个人在 x1 中输入 1，x2 减 1。如果一个人在 x1 中输入 3，则 x2 增加 5，而不添加 5 作为新数字
任何答案都能解决您的问题吗？

标签： javascript html if-statement increment

【解决方案1】：

if (x1.value == 3) {
    x2.value = parseInt(x2.value) + 5;
}

它将它解释为一个字符串。你可以parseIntx2.value在计算中。

【讨论】：

我使用 parseInt 失败了
忽略它创造了奇迹。非常感谢@Bitwise Creative

【解决方案2】：

输入的值是一个字符串，你需要把它转换成一个数字才能对其进行加法。

你可以这样做：

function ThisEvent() { // needs a lot of work done to it
    var valX1 = Number(x1.value);
    var valX2 = Number(x2.value);
    if (valX1 == 1) {
        valX2--;
    } else {
        if (valX1 == 2) {
            valX2++;
        } else {
            if (valX1 == 3) {
                valX2 += 5;
            }
        }
    }
    x2.value = valX2;
}

jsFiddle：https://jsfiddle.net/v1utqv7f/

【讨论】：