Math calculator script error with JS

Question

did I miss something with my script?

its like everything goes right when I press the minus (-) button, but when i press plus (+) button the calculator goes wrong. its show 1, 11, 21, ~ everything was end with 1..

here is my code :

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>

I got this code from w3school and edit it in very basic knowledge. Is there anything I miss? or do you have any better ways to write it corectly?

Mr. Roshan · Answer 1 · 2018-07-12T11:18:56.120

3

Try this:-

Use parseInt() function to convert string value into Number type.

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>

edited Jul 12 '18 at 11:18

answered Jul 12 '18 at 11:07

Mr. Roshan

1,777
13
33

1

Actually there's no `Integer` type in JavaScript, it should be `Number` instead. – cнŝdk Jul 12 '18 at 11:17
1

@chŝdk well said..!!! will be number instead of integer. – Mr. Roshan Jul 12 '18 at 11:18

Nick Parsons · Answer 2 · 2018-07-12T11:15:03.180

You need to make the string an integer/number (it is currently a string so it is concatenating the value rather than adding it). You can do this by using parseInt(document.getElementById("myNumber").value);

This will make the value into an integer, for example "1" into 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>

It should be `Number` and not `Integer` in your first sentence, *You need to make the number an integer* should be *you need to parse strings as Number*. — cнŝdk, Jul 12 '18 at 11:10

score 3 · Accepted Answer · answered Jul 12 '18 at 11:08

You need to parse the input value to a number - since all input values are actually strings.

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>

Lasithe · Answer 4 · 2018-07-12T11:36:31.237

First you have to convert the input value to Number and no need to multiply it by 1. Use parseInt function for the conversion.

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

Same thing, there's no `Integer` type in JavaScript, it should be `Number` instead. — cнŝdk, Jul 12 '18 at 11:19

score 1 · Answer 5 · answered Jul 12 '18 at 13:44

Do +document.getElementById("myNumber").value. Problem solved.

Reason:

By definition document.getElementById("myNumber").value returns String value in x
JS has an urge to prevent the compiler errors. So, while doing x+y i.e. Number + String. JS, by default, automatically typecast your Number value to string and interprets '+' as the concatenation operator.

You can use the same urge of JS in your favour. When, JS tackles a '+' sign before a string and if that string is nothing but numeric characters. It gets converted into number.

Refer Addition Operator and Unary Plus for details.

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>

Math calculator script error with JS

5 Answers5