JavaScript issue with getElementById

Question

What I want to do is get values from two forms and then add them and display the result, the problem is that it's not working and can't find out why. Is something simple but I'm new in Javascript =/. Here is my code

<!DOCTYPE html>
<html> 
    <head> 
        <title> Random Page </title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <form>
            Escriba el primer número: <input type="number" id="txtNumber1">
        </form> 
        <br>
        <form>
            Escriba el segundo número: <input type="number" id="txtNumber2">
        </form> 
        <br>
        <button id="btnSumar" onclick="Sumar()"> ¡Sumar! </button> 
        <br>
        <p id="p"> I'm a paragraph </p>
        <script>
            function Sumar() {
                document.getElementById("p").innerHTML="It works until here.";
                var num1 = document.getElementById("txtNumber1").value;
                var num2 = document.getElementById("txtNumber2").value;
                this.resultado = num1 + num2;
            }
            document.getElementById("p").innerHTML="The result is " + resultado;
        </script>
    </body>
</html>

Any help will be appreciated. Tahnks.

[See this answer](http://stackoverflow.com/a/20216482/1377002) — Andy, Nov 26 '13 at 16:28
What do you think `this.resultado = num1 + num2;` is doing? When do you think `document.getElementById("p").innerHTML="The result is " + rst.resultado;` executes? The innerHTML line does not magically update when the variable is updated! — epascarello, Nov 26 '13 at 16:30

Christos · Answer 1 · 2013-11-26T16:41:47.573

1

<script>
    function Sumar() {
        document.getElementById("p").innerHTML="It works until here.";
        var num1 = document.getElementById("txtNumber1").value;
        var num2 = document.getElementById("txtNumber2").value;
        var resultado = parseInt(num1) + parseInt(num2);
        document.getElementById("p").innerHTML="The result is " + resultado;
    }
</script>

edited Nov 26 '13 at 16:41

answered Nov 26 '13 at 16:35

Christos

53,228
8
76
108

If you're going to use `parseInt` you really need to include the radix. – Andy Nov 26 '13 at 16:38
2

@Andy, I think that the radi parameter is optional. – Christos Nov 26 '13 at 16:43
[Always specify this parameter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt)... – Andy Nov 26 '13 at 16:47
Optional, but always try to specify it or you'll get into all kinds of problems :) – Andy Nov 26 '13 at 16:59

Krish R · Accepted Answer · 2013-11-26T16:45:34.573

0

Can you try this, I found invalid methods this.resultado and rst.resultado in your code since there is no root cause for this, you can use parseInt or parseFloat based on your input number

  function Sumar() {
            document.getElementById("p").innerHTML="It works until here.";
            var num1 = document.getElementById("txtNumber1").value;
            var num2 = document.getElementById("txtNumber2").value;

            var result = num1 + num2; // you can use parseInt or parseFloat based on your input number 
            document.getElementById("p").innerHTML="The result is " +  result;
        }

edited Nov 26 '13 at 16:45

answered Nov 26 '13 at 16:28

Krish R

22,583
7
50
59

If you're going to use `parseInt` you really need to include the radix. – Andy Nov 26 '13 at 16:31
@putvande, assumed OP wants just like simple add, any way i have removed that. For that You have downvoted ? – Krish R Nov 26 '13 at 16:37
No I haven't downvoted, I just wondered why you didn't use it. – putvande Nov 26 '13 at 16:41
A downvoted Party, anyway thanks, the problem was that document.getElementById was out from the function so it wasn't working. – Blackmore Nov 26 '13 at 16:49

Space Age Crystal · Answer 3 · 2013-11-27T22:01:31.603

Here are two examples, one using standard JavaScript, which should answer the basic question, and an example using globalize.js, which will handle international styles of numerical notation.

Using standard JavaScript

Use the parseInt() (or parseFloat()) function to convert the text field argument to a number and remove characters, move the last innerHTML line into the Sumar() function, and change rst.resultado and this.resutado to resultado. jsFiddle example here.

<script>
    function Sumar() {
        var num1 = parseInt(document.getElementById("txtNumber1").value);
        var num2 = parseInt(document.getElementById("txtNumber2").value);
        resultado = num1 + num2;
        document.getElementById("p").innerHTML="The result is " + resultado;
    }
</script>

Using Globalize.js to Allow International Number Formatting

jQuery offers a script developed with Microsoft called globalize.js that formats numbers based on a locale. In this jsFiddle, I used Spain as the locale as an example, but its capable of many more formats and locales. Try using notation like 1.234,56 to check calculations. You can use the toLocaleString() function to format the calculated number back to a localized format, but this currently only works in Chrome and IE. You could use regex for the other browsers, but this is all I had time for. Here is the basic script, but look at the jsFiddle to see the other js required and the changes that needed to be made to the form tags.

<script>
    function Sumar() {
        var num1 = Globalize.parseFloat(document.getElementById("txtNumber1").value);
        var num2 = Globalize.parseFloat(document.getElementById("txtNumber2").value);
        resultado = num1 + num2;
        document.getElementById("p").innerHTML = "The result is " + resultado.toLocaleString("es-ES");
    }
</script>

What if the value of `#txtNumber1` is "1234,56"? Than `num1` is `NaN` — putvande, Nov 26 '13 at 16:43
[Stack Overflow: Restricting input to textbox: allowing only numbers and decimal point](http://stackoverflow.com/questions/2808184/restricting-input-to-textbox-allowing-only-numbers-and-decimal-point) — Space Age Crystal, Nov 26 '13 at 16:49
Hmm.. but "1234,56" is a number in some countries so why restrict that? — putvande, Nov 26 '13 at 16:51
Interesting, I wasn't thinking about internationalization. What countries use , instead of .? — Space Age Crystal, Nov 26 '13 at 17:32
About 67 countries do, including Spain (which I guess OP is from) http://en.wikipedia.org/wiki/Decimal_mark#Hindu.E2.80.93Arabic_numeral_system — putvande, Nov 26 '13 at 17:33
Hmmm. It looks like ParseFloat returns a Nan with , notation. I'm guessing the conversion would need to happen at the presentation level in js? This is an interesting issue I'll look into it later thanks! — Space Age Crystal, Nov 26 '13 at 17:51
Updated to add globalization solution thanks for the heads up! — Space Age Crystal, Nov 27 '13 at 20:51

JavaScript issue with getElementById

3 Answers3

Using standard JavaScript

Using Globalize.js to Allow International Number Formatting