Javascript Nan Error: parsing strings to ints

Question

References

How to convert string into float in javascript? jQuery calculation NaN

Goal

Take two numerical input values from the user. Divide the second number by the first number. Multiply the result by 100 so it is represented as a percentage. Add each number and the result to individual lists. Call the function getTextInput() via onClick command.

Background

I primarily work with Java; I am currently in a data structures class (second year CS student). My proficiency is intermediate. My familiarity with javascript is basic.

Problem

NaN results. I have tried multiple methods to achieve this task; I parsed both input values and assigned them to new variables, and I parsed both initial string inputs to a float value. However, I am still having a problem parsing the result of these two numbers of type int or string to a float value. Should I be parsing to a float value of parameters of type int? When I convert the string values to int values the program won’t accept the input values and crashes. Why is this happening? I have looked at several related posts, but cannot find anything that provides the information I am looking for. What is the best method to go about this? Any help or direction is greatly appreciated. Thanks.

NOTE Entire code posted at the very bottom.

Method 1 - parsed two strings to float. ‘NaN’ result when I printed percentOfNumbers and percentageList to the console.

var num1 = document.getElementById("numString1"); var num2 = document.getElementById("numString2");

percentOfNumbers = parseFloat(num2/num1 * 100); percentageList.push(percentOfNumbers); percentOfNumbers.value = "";

// add num1 to List1 List1.push(num1.value); num1.value = "";

// add num2 to List2 List2.push(num2.value); num2.value= "";

Method 2 - parsed each text input to an int value, parsed the result to a float value. ‘NaN’ result when I printed percentOfNumbers and percentageList to the console.

var num1 = document.getElementById("numString1"); var num2 = document.getElementById("numString2");

var num1Parsed = parseInt(num1); var num2Parsed = parseInt(num2);

percentOfNumbers = parseFloat(num2Parsed/num1Parsed * 100); percentageList.push(percentOfNumbers); percentOfNumbers.value = "";

// add num1 to List1 List1.push(num1Parsed.value); num1Parsed.value = "";

// add num2 to List2 List2.push(num2Parsed.value); num2Parsed.value= "";

// EXAMPLE INPUT VALUES, 2000 for num1, 2233 for num2

// Entire Code

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
--><!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script>

            // separate lists for repeat user input values for num1, num2, and percentageOfNumbers
            var List1 = [];
            var List2 = [];
            var percentageList = [];
            var percentOfNumbers = 0;
            var num1Parsed = 0;
            var num2Parsed = 0;

           function getTextInput() {

                // retrieve two numbers of type 'String' from user and assign to appropriate var
                var num1 = document.getElementById("numString1");
                var num2 = document.getElementById("numString2");

                // parse each string input number into an int
                num1Parsed = parseInt(num1);
                num2Parsed = parseInt(num2);

                // divide second number by first number
                // parse result and assign to percentOfNumbers var
                // add percentOfNumbers value to percentageList
                // reassign percentOfNumbers to ""
                percentOfNumbers = (num2Parsed/num1Parsed * 100);
                percentageList.push(percentOfNumbers);
                percentOfNumbers.value = "";

                // add num1 to List1
                List1.push(num1Parsed.value);
                num1Parsed.value = "";

                // add num2 to List2
                List2.push(num2Parsed.value); 
                num2Parsed.value= "";



           }

    </script>

    </head>
    <body>
        <input id="numString1" type="text" name="input1" value="" /> 
        <input id="numString2" type="text" name="input2" value="" /> 
        <input id="inputField" type="button" name="search" value="compute" onClick="getTextInput();" /> 
    </body>
</html>

Guffa · Answer 1 · 2013-04-29T23:44:23.667

1

The num1 and num2 variables doesn't contain strings, they contain the DOM elements.

Use the value property to get the value from the input fields:

var num1 = document.getElementById("numString1").value;
var num2 = document.getElementById("numString2").value;

Numbers however doesn't have a value property. You want to push the number itself:

List1.push(num1Parsed);
List2.push(num2Parsed);

Side note: Specify the base when you use parseInt, as numbers with leading zeroes are parsed using base 8 instead of 10:

num1Parsed = parseInt(num1, 10);
num2Parsed = parseInt(num2, 10);

edited Apr 29 '13 at 23:44

answered Apr 29 '13 at 23:38

Guffa

687,336
108
737
1,005

Regarding *parseInt* and leading zeros, in [ES5](http://www.ecma-international.org/ecma-262/5.1/#sec-15.1.2.2) the "specification of the function parseInt no longer allows implementations to treat Strings beginning with a 0 character as octal values". However, implementation still do. Go figure. – RobG Apr 30 '13 at 00:10
Thank you for responding so quickly. That makes sense though. I have only recently begun to learn javascript, I appreciate your patience and help. The code is working. – user548 Apr 30 '13 at 02:03

Javascript Nan Error: parsing strings to ints

1 Answers1