Получение Javascript NaN При расчете полей ввода

Question

Я использую Jquery, чтобы подсчитать итоговые значения входных данных для этого калькулятора ковров, который я пишу. Проблема, с которой я столкнулся, заключается в том, что я могу выводить значения, пока я нахожусь в for l oop, но получаю NaN, когда я нахожусь за пределами обоих циклов, как показано ниже.

Вот рабочий пример проблема, с которой я тоже столкнулся -

https://codepen.io/CodeHero1/pen/abdjpgL

    $('#calculate-cost').on('click',function(){


    var widthTotalFeet = $('.room-width-feet').map((_,el) => el.value).get();
    var widthTotalInches = $('.room-width-inches').map((_,el) => el.value).get();

    var roomWidthTotalFeet = 0;  // total feet
    var roomWidthTotalInches = 0;  // total inches


    for(var i = 0; i < widthTotalFeet.length; i++) {

        roomWidthTotalFeet += parseInt(widthTotalFeet[i]);
        console.log('in array');
        //This increments correctly
        console.log('feet +' + roomWidthTotalFeet);
    }


    for(var i = 0; i < widthTotalInches.length; i++) {

        roomWidthTotalInches += parseInt(widthTotalInches[i]);
        //This increments correctly
        console.log('inches +' + roomWidthTotalInches);

    }

    var roomFeetAndInches = parseFloat(roomWidthTotalFeet + '.' + roomWidthTotalInches);

    

        //Receiving NaN on these console logs
        console.log('Parse ' + roomFeetAndInches);
        console.log('room widht feet=' + roomWidthTotalFeet);
        console.log('room widht inches=' + roomWidthTotalInches);


});

Answer 1

Проблема связана с использованием parseInt. Массивы widthTotalFeet и widthTotalInches могут выглядеть примерно так: ['1','', '2'] ... где empty string используется для любых пустых полей. Если вы сделаете parseInt(''), это приведет к NaN. Чтобы исправить это, вы должны исключить пустые строки или убедиться, что они добавляют 0 в ваши циклы.

Answer 2

Вы уверены, что roomWidthTotalFeet и roomWidthTotalInches не имеют конечных пробелов? Попробуйте выполнить преобразование с плавающей запятой следующим образом:

var roomFeetAndInches = parseFloat(trim(roomWidthTotalFeet) + "." + trim(roomWidthTotalInches));

Более того, лучше использовать двойные кавычки вместо одиночных ...