Form calculate with integer javascript

Question

I want the user to insert a number e.g. 10 and make the calculation var newbalance + balance + 2, but the output of this code would be 102 and not 12. I think my script thinks the var balance is not an integer but a word or something. how can I fix this

<form id="form" oninput="checkChange()" onchange="checkChange()">
                            <div class="container100 t-center" style="font-size:0;">
                                <div class="container20 t-center">
                                </div>
                                <div class="container60 t-center">
                                    <div class="container60 t-center" style="font-size:0;">                                                 
                                        <div class="container60 t-center">
                                            Balance
                                            <input name="balance" type="text" style="width:90%;" placeholder='balance'>
                                            <input type="text" id="mytext">
                                        </div>
                                    </div><br><br>                                  
                                </div>
                                <div class="container20 t-center">
                                </div>
                            </div>                              
                        </form><br>                                 
                        <button id="submit" class="button" onclick="command()">Submit</button><br><br>
                        <script>
                            document.getElementById('submit').onclick = command;    
                            var submitButton = document.getElementById('submit');
                            submitButton.onclick = command;

                            function command() {
                               event.preventDefault();
                               submitButton.style.background = 'rgba(92,184,92,1)';
                            }

                            function checkChange(){ 
                              submitButton.style.background = 'rgba(90,90,90,1.0)';
                            }                                       
                            function command(){
                                var x = document.getElementById("form");
                                var balance = x.elements["balance"].value;

                                var newbalance = balance + 2;
                                document.getElementById("mytext").value = newbalance;
                            }
                        </script>

You think right...convert it to a number – charlietfl Jan 11 '18 at 16:21 — charlietfl, Jan 11 '18 at 16:21

score 1 · Accepted Answer · answered Jan 11 '18 at 16:21

1

User input is (almost) always a string. So this returns a string:

x.elements["balance"].value

What you can do in this case is parse it as an integer:

var balance = parseInt(x.elements["balance"].value);

answered Jan 11 '18 at 16:21

David

208,112
36
198
279

score 0 · Answer 2 · answered Jan 11 '18 at 16:21

0

There are several methods to turn a string in to a number in JavaScript, such as parseInt, parseFloat, or + - what you use depends on your use case but parseInt may be the most simple.

answered Jan 11 '18 at 16:21

Liam MacDonald

301
1
9

score 0 · Answer 3 · answered Jan 11 '18 at 16:22

0

You can use parseInt to make an integer from a string:

const a = '2';
const b = '3';

const result = parseInt(a) + parseInt(b); // 5

answered Jan 11 '18 at 16:22

Neskews

764
1
10
23

score 0 · Answer 4 · answered Jan 11 '18 at 16:27

0

If you are 100% sure that balance will only receive valid numeric values you could try this:

var newbalance = +balance + 2;

The + will convert balance in a numeric value if string, if numeric value it will remain the same.

answered Jan 11 '18 at 16:27

assembler

3,098
12
43
84

Form calculate with integer javascript

4 Answers4