JS的数学计算器脚本错误[重复]答案

【问题标题】：Math calculator script error with JS [duplicate]JS的数学计算器脚本错误[重复]
【发布时间】：2018-07-12 11:04:03
【问题描述】：

我的脚本是否遗漏了什么？

当我按下减号 (-) 按钮时，一切正常，但当我按下加号 (+) 按钮时，计算器出错了。它的节目 1, 11, 21, ~ 一切都以 1.. 结束..

这是我的代码：

function myFunctionDown() {
    var x = document.getElementById("myNumber").value;
    var y = 1;
    var a = (x-y)*1;
    document.getElementById("myNumber").stepUp(-1);
    document.getElementById("demo").innerHTML = a;
}
function myFunctionUp() {
    var x = document.getElementById("myNumber").value;
    var y = 1;
    var a = (x+y)*1;
    document.getElementById("myNumber").stepUp(1);
    document.getElementById("demo").innerHTML = a;
}

<button onclick="myFunctionDown()">-</button>
<input type="number" id="myNumber" value="0">
<button onclick="myFunctionUp()">+</button>
<br/><br/>
$ <span id="demo">0</span>

我从 w3school 获得了这段代码，并用非常基础的知识对其进行了编辑。有什么我想念的吗？或者你有没有更好的方法来正确地编写它？

【问题讨论】：

标签： javascript html

【解决方案1】：

您需要将输入值解析为数字 - 因为所有输入值实际上都是字符串。

function myFunctionDown() {
    var x = parseInt(document.getElementById("myNumber").value);
    var y = 1;
    var a = (x-y)*1;
    document.getElementById("myNumber").stepUp(-1);
    document.getElementById("demo").innerHTML = a;
}
function myFunctionUp() {
    var x = parseInt(document.getElementById("myNumber").value);
    var y = 1;
    var a = (x+y)*1;
    document.getElementById("myNumber").stepUp(1);
    document.getElementById("demo").innerHTML = a;
}

<button onclick="myFunctionDown()">-</button>
<input type="number" id="myNumber" value="0">
<button onclick="myFunctionUp()">+</button>
<br/><br/>
$ <span id="demo">0</span>

【讨论】：

【解决方案2】：

您需要使字符串成为整数/数字（它当前是一个字符串，因此它连接值而不是添加它）。您可以使用parseInt(document.getElementById("myNumber").value); 来做到这一点

这会将值变成一个整数，例如"1"变成1

function myFunctionDown() {
    var x = document.getElementById("myNumber").value;
    var y = 1;
    var a = (x-y)*1;
    document.getElementById("myNumber").stepUp(-1);
    document.getElementById("demo").innerHTML = a;
}
function myFunctionUp() {
    var x = parseInt(document.getElementById("myNumber").value);
    var y = 1;
    var a = (x+y)*1;
    document.getElementById("myNumber").stepUp(1);
    document.getElementById("demo").innerHTML = a;
}

<button onclick="myFunctionDown()">-</button>
<input type="number" id="myNumber" value="0">
<button onclick="myFunctionUp()">+</button>
<br/><br/>
$ <span id="demo">0</span>

【讨论】：

第一句应该是Number而不是Integer，你需要把数字变成整数应该是你需要把字符串解析为编号.
@chŝdk 啊，谢谢哈哈。更新了:)

【解决方案3】：

试试这个：-

使用parseInt()函数将字符串值转换为数字类型。

function myFunctionDown() {
    var x = parseInt(document.getElementById("myNumber").value);
    var y = 1;
    var a = (x-y)*1;
    document.getElementById("myNumber").stepUp(-1);
    document.getElementById("demo").innerHTML = a;
}
function myFunctionUp() {
    var x = parseInt(document.getElementById("myNumber").value);
    var y = 1;
    var a = (x+y)*1;
    document.getElementById("myNumber").stepUp(1);
    document.getElementById("demo").innerHTML = a;
}

<button onclick="myFunctionDown()">-</button>
<input type="number" id="myNumber" value="0">
<button onclick="myFunctionUp()">+</button>
<br/><br/>
$ <span id="demo">0</span>

【讨论】：

JavaScript中其实没有Integer类型，应该是Number。
@chŝdk 说得好..!!!将是数字而不是整数。

【解决方案4】：

首先您必须将输入值转换为Number，无需将其乘以1。使用parseInt 函数进行转换。

<button onclick="myFunctionDown()">-</button>
<input type="number" id="myNumber" value="0">
<button onclick="myFunctionUp()">+</button>
<br/><br/>
$ <span id="demo">0</span>
<script>
function myFunctionDown() {
    var x = parseInt(document.getElementById("myNumber").value);
    var y = 1;
    var a = x-y;
    document.getElementById("myNumber").stepUp(-1);
    document.getElementById("demo").innerHTML = a;
}
function myFunctionUp() {
    var x = parseInt(document.getElementById("myNumber").value);
    var y = 1;
    var a = x+y;
    document.getElementById("myNumber").stepUp(1);
    document.getElementById("demo").innerHTML = a;
}
</script>

【讨论】：

同样的，JavaScript 中没有 Integer 类型，而应该是 Number。
啊，是的。它应该是数字类型。已编辑

【解决方案5】：

做+document.getElementById("myNumber").value。问题解决了。

原因：

根据定义document.getElementById("myNumber").value在x中返回String值
JS 有防止编译器错误的冲动。因此，在执行x+y 即Number + String 时。默认情况下，JS 会自动将您的 Number 值类型转换为字符串，并将 '+' 解释为连接运算符。

你可以使用同样的 JS 冲动来支持你。什么时候，JS 在字符串前处理一个“+”号，如果该字符串只是数字字符。它被转换成数字。

详情请参阅Addition Operator 和Unary Plus。

function myFunctionDown() {
    var x = +document.getElementById("myNumber").value;
    var y = 1;
    var a = (x-y)*1;
    document.getElementById("myNumber").stepUp(-1);
    document.getElementById("demo").innerHTML = a;
}
function myFunctionUp() {
    var x = +document.getElementById("myNumber").value;
    var y = 1;
    var a = (x+y)*1;
    document.getElementById("myNumber").stepUp(1);
    document.getElementById("demo").innerHTML = a;
}

<button onclick="myFunctionDown()">-</button>
<input type="number" id="myNumber" value="0">
<button onclick="myFunctionUp()">+</button>
<br/><br/>
$ <span id="demo">0</span>

【讨论】：