adding two numbers with string

Question

I am looking for a way to calculate two numbers, where each of these two numbers have a string beside it in a textbox like "dolar" or "meter", when I add the string in value="" and calculate I get this message: NaN

here is my code:

function myFunction() {
  var y1 = document.getElementById("text1").value;
  var y2 = document.getElementById("text2").value;
  var x = Number(y1) + Number(y2);
  document.getElementById("demo").value = x;
}

<p>
  Enter first number:
  <input type="text" size="10" id="text1" name="text1" onblur="myFunction()"> Enter second number:
  <input type="text" size="10" id="text2" name="text2" onblur="myFunction()">
</p>
<input type="text" id="demo" name="demo" size="10" value="">

Pointy · Accepted Answer · 2018-11-25 14:31:03Z

2

The Number() constructor will reject an input string that isn't completely a number, and will return NaN in that case.

All is not lost however: the parseFloat() function simply stops parsing when it gets to text that isn't part of a number, so a string like "127.45 pounds" will be parsed as the number 127.45.

answered Nov 25, 2018 at 14:31

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

Comments

humbleHacker · Accepted Answer · 2018-11-25 19:39:25Z

1

This function will give you what you want from what I understand. Might not be perfect but seems to fit what you're after. Note, most of the html code is the same that you have provided above. This code takes two inputs (e.g., text1= "2 metres" and text2= "3 metres") parses the number part of the strings, adds the numbers, and displays the answer in the demo field (e.g., "5"):

    <html>
    <head>
    <script type='text/javascript'>
    function myFunction() {
        var y1 = parseFloat(document.getElementById("text1").value);
        var y2 = parseFloat(document.getElementById("text2").value);

        if ( !isNaN(y1) && !isNaN(y2) )
        {    

            document.getElementById("demo").value = (y1 + y2);
        }
        else 
        {
            if (document.getElementById("demo").value.length > 0)
                document.getElementById("demo").value = ""  
        }
    }

    </script>
    <body>
    <p>
    Enter first number:
    <input type="text" size="10" id="text1" onblur="myFunction()"> Enter second number:
    <input type="text" size="10" id="text2" onblur="myFunction()">  
    </p>
    <input type="text" id="demo" name="demo" size="10" value="">
    </html>

edited Nov 25, 2018 at 19:39

answered Nov 25, 2018 at 15:27

humbleHacker

4477 silver badges17 bronze badges

3 Comments

anater mj Over a year ago

thanks but this is only hide the NaN message, what I need is to calculate the number even if there is a string in the same field

humbleHacker Over a year ago

I'm confused @anatermj, because this function will calculate the numbers in text1 and text2 even if there are non-number characters in the strings. The only time it won't do the calculation is when there are no numbers present, as determined by the parseFloat() and subsequent isNaN() method calls. I've run the function using your html example and that's what it does

anater mj Over a year ago

can you add the input file code with string in value with the script code

tomerpacific · Accepted Answer · 2018-11-25 14:31:20Z

1

anater mj, the onblur method gets executed when a user leaves an input field. What you will get is, when a user leaves one of the input fields and has not yet written any value in the other input field, the method myFunction will get called, but the value of one of the input fields will not be able to be converted to a Number since its value is undefined.

I would suggest either adding a button to execute myFunction or to add a defensive clause to your code to check the value of the input fields first.

answered Nov 25, 2018 at 14:31

tomerpacific

6,85118 gold badges43 silver badges61 bronze badges

Comments

Honinbo Shusaku · Accepted Answer · 2018-11-25 14:32:19Z

1

I would add that your input number inputs don't have an ID, and you're referencing them with document.getElementById("text1"). Add the referenced IDs to the inputs or use getElementsByName

answered Nov 25, 2018 at 14:32

Honinbo Shusaku

1,5563 gold badges28 silver badges47 bronze badges

1 Comment

anater mj Over a year ago

my bad I fixed it

Venkatesh R · Accepted Answer · 2018-11-25 14:31:41Z

0

If the field having any non numeric value then we will get NaN. An acronym for “Not a Number.”

If the field holds only integer then use below

var x = parseInt(y1) + parseInt(y2);

If float value then

var x = parseFloat(y1) + parseFloat(y2);

answered Nov 25, 2018 at 14:31

Venkatesh R

5381 gold badge11 silver badges31 bronze badges

Collectives™ on Stack Overflow

adding two numbers with string

5 Answers 5

Comments

3 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related