0

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?

Improve this question
0

5 Answers 5

Reset to default
3

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

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>

Improve this answer

2 Comments

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.
@chŝdk Ah, thanks ha ha. Updated it :)
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>

Improve this answer

2 Comments

Actually there's no Integer type in JavaScript, it should be Number instead.
@chŝdk well said..!!! will be number instead of integer.
2

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>
Improve this answer

2 Comments

Same thing, there's no Integer type in JavaScript, it should be Number instead.
Ah yes. It should be Number type. Edited
1

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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.