jQuery Addition Calculator

Question

Please ignore row "B. and C." as it works in the environment where it was implemented and is missing the JavaScript reference. The rows highlighted in light blue are the issue. I injected row "A." to calculate (addition) the input of the rows above it. I am appealing to experts who know how to better recognize loops/arrays and scenarios to reduce lines of code to advise me and reproduce this with much less code and explain in great detail how and why they chose that specific method.

Once rows 1-4 have been filled in, a checkbox will show up so the respondent will know that they are done with that portion.

Again, please refine and reduce my code (side note, that was my first time putting it into jsfiddle and there were quite a few errors, eeks). I hope it did not affect data intake.

I have been reading up on jQuery from books borrowed from the library so feel free to make references to split/splice/slice. I will do my homework and this will be a learning experience for me.

jsFiddle

//Code Review 07-15-2015
//Reduce large lines of code by utilizing arrays, each, for, on change and setInterval
//Please ignore row "C." it works in the environment it is supposed to.
//-Dynamically Add Input Count - Dixon, Alexander 2015
            $('#_Q33_Q0_Q0').keyup(function() {     //-Q17A Custom Totals
                $("#_Q33_Q0_Q0").each(function(){
                    var rowOne = parseInt($(this).val(), 10);
                    var rowTwo = parseInt($('#_Q33_Q1_Q0').val(), 10);
                    var rowThree = parseInt($('#_Q33_Q2_Q0').val(), 10);
                    var rowFour = parseInt($('#_Q33_Q3_Q0').val(), 10);
                    var oneCheck = $(this).val().length;
                    var twoCheck = $('#_Q33_Q1_Q0').val().length;                   
                    var threeCheck = $('#_Q33_Q2_Q0').val().length;
                    var fourCheck = $('#_Q33_Q3_Q0').val().length;
                    if(oneCheck < 1 || isNaN(rowOne))
                    {
                        rowOne = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(twoCheck < 1 || isNaN(rowTwo))
                    {
                        rowTwo = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(threeCheck < 1 || isNaN(rowThree))
                    {
                        rowThree = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(fourCheck < 1 || isNaN(rowFour))
                    {
                        rowFour = "0";
                        $('#customSum').css("color", "red");
                    }
                    var sumOne = parseInt(rowOne, 10) + parseInt(rowTwo, 10) + parseInt(rowThree, 10) + parseInt(rowFour, 10);
                    if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                    {
                        $('#customSum').css("background-color", "#e5f2fb");
                        $('#customSum').css("color", "green");
                        $('#customSum').text(sumOne);
                        $('#_Q33_Q0_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q1_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q2_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q3_Q0').css("background-color", "#e5f2fb");
                        if(oneCheck > 0 && twoCheck > 0 && threeCheck > 0 && fourCheck > 0)
                        {
                            if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                            {
                                $('#customSum').text(sumOne);
                                $('#topFour').html('<img src="http://surveys.researchresults.com/legacy/259/0067/checkmark.png">');
                            }
                        }
                    }
                });
            }); 

            $('#_Q33_Q1_Q0').keyup(function() {     //-Q17A Custom Totals
                $("#_Q33_Q1_Q0").each(function(){
                    var rowOne = parseInt($('#_Q33_Q0_Q0').val(), 10);
                    var rowTwo = parseInt($(this).val(), 10);
                    var rowThree = parseInt($('#_Q33_Q2_Q0').val(), 10);
                    var rowFour = parseInt($('#_Q33_Q3_Q0').val(), 10);
                    var oneCheck = $('#_Q33_Q0_Q0').val().length;
                    var twoCheck = $(this).val().length;                    
                    var threeCheck = $('#_Q33_Q2_Q0').val().length;
                    var fourCheck = $('#_Q33_Q3_Q0').val().length;
                    if(oneCheck < 1 || isNaN(rowOne))
                    {
                        rowOne = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(twoCheck < 1 || isNaN(rowTwo))
                    {
                        rowTwo = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(threeCheck < 1 || isNaN(rowThree))
                    {
                        rowThree = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(fourCheck < 1 || isNaN(rowFour))
                    {
                        rowFour = "0";
                        $('#customSum').css("color", "red");
                    }
                    var sumOne = parseInt(rowOne, 10) + parseInt(rowTwo, 10) + parseInt(rowThree, 10) + parseInt(rowFour, 10);
                    if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                    {
                        $('#customSum').css("background-color", "#e5f2fb");
                        $('#customSum').css("color", "green");
                        $('#customSum').text(sumOne);
                        $('#_Q33_Q0_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q1_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q2_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q3_Q0').css("background-color", "#e5f2fb");
                        if(oneCheck > 0 && twoCheck > 0 && threeCheck > 0 && fourCheck > 0)
                        {
                            if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                            {
                                $('#customSum').text(sumOne);
                                $('#topFour').html('<img src="http://surveys.researchresults.com/legacy/259/0067/checkmark.png">');
                            }
                        }
                    }
                });
            });

            $('#_Q33_Q2_Q0').keyup(function() {     //-Q17A Custom Totals
                $("#_Q33_Q2_Q0").each(function(){
                    var rowOne = parseInt($('#_Q33_Q0_Q0').val(), 10);
                    var rowTwo = parseInt($('#_Q33_Q1_Q0').val(), 10);
                    var rowThree = parseInt($(this).val(), 10);
                    var rowFour = parseInt($('#_Q33_Q3_Q0').val(), 10);
                    var oneCheck = $('#_Q33_Q0_Q0').val().length;
                    var twoCheck = $('#_Q33_Q1_Q0').val().length;
                    var threeCheck = $(this).val().length;
                    var fourCheck = $('#_Q33_Q3_Q0').val().length;
                    if(oneCheck < 1 || isNaN(rowOne))
                    {
                        rowOne = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(twoCheck < 1 || isNaN(rowTwo))
                    {
                        rowTwo = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(threeCheck < 1 || isNaN(rowThree))
                    {
                        rowThree = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(fourCheck < 1 || isNaN(rowFour))
                    {
                        rowFour = "0";
                        $('#customSum').css("color", "red");
                    }
                    var sumOne = parseInt(rowOne, 10) + parseInt(rowTwo, 10) + parseInt(rowThree, 10) + parseInt(rowFour, 10);
                    if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                    {
                        $('#customSum').css("background-color", "#e5f2fb");
                        $('#customSum').css("color", "green");
                        $('#customSum').text(sumOne);
                        $('#_Q33_Q0_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q1_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q2_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q3_Q0').css("background-color", "#e5f2fb");
                        if(oneCheck > 0 && twoCheck > 0 && threeCheck > 0 && fourCheck > 0)
                        {
                            if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                            {
                                $('#customSum').text(sumOne);
                                $('#topFour').html('<img src="http://surveys.researchresults.com/legacy/259/0067/checkmark.png">');
                            }
                        }
                    }
                });             
            });

            $('#_Q33_Q3_Q0').keyup(function() {     //-Q17A Custom Totals
                $("#_Q33_Q3_Q0").each(function(){
                    var rowOne = parseInt($('#_Q33_Q0_Q0').val(), 10);
                    var rowTwo = parseInt($('#_Q33_Q1_Q0').val(), 10);
                    var rowThree = parseInt($('#_Q33_Q2_Q0').val(), 10);
                    var rowFour = parseInt($(this).val(), 10);
                    var oneCheck = $('#_Q33_Q0_Q0').val().length;
                    var twoCheck = $('#_Q33_Q1_Q0').val().length;
                    var threeCheck = $('#_Q33_Q2_Q0').val().length;
                    var fourCheck = $(this).val().length;
                    if(oneCheck < 1 || isNaN(rowOne))
                    {
                        rowOne = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(twoCheck < 1 || isNaN(rowTwo))
                    {
                        rowTwo = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(threeCheck < 1 || isNaN(rowThree))
                    {
                        rowThree = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(fourCheck < 1 || isNaN(rowFour))
                    {
                        rowFour = "0";
                        $('#customSum').css("color", "red");
                    }
                    var sumOne = parseInt(rowOne, 10) + parseInt(rowTwo, 10) + parseInt(rowThree, 10) + parseInt(rowFour, 10);
                    if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                    {
                        $('#customSum').css("background-color", "#e5f2fb");
                        $('#customSum').css("color", "green");
                        $('#customSum').text(sumOne);
                        $('#_Q33_Q0_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q1_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q2_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q3_Q0').css("background-color", "#e5f2fb");
                        if(oneCheck > 0 && twoCheck > 0 && threeCheck > 0 && fourCheck > 0)
                        {
                            if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                            {
                                $('#customSum').text(sumOne);
                                $('#topFour').html('<img src="http://surveys.researchresults.com/legacy/259/0067/checkmark.png">');
                            }
                        }
                    }
                });
            });

                if($('span.firstQual').length > 0) //-First Loaded
                {
                    var rowOne = parseInt($('#_Q33_Q0_Q0').val(), 10);
                    var rowTwo = parseInt($('#_Q33_Q1_Q0').val(), 10);
                    var rowThree = parseInt($('#_Q33_Q2_Q0').val(), 10);
                    var rowFour = parseInt($('#_Q33_Q3_Q0').val(), 10);
                    var oneCheck = $('#_Q33_Q0_Q0').val().length;
                    var twoCheck = $('#_Q33_Q1_Q0').val().length;
                    var threeCheck = $('#_Q33_Q2_Q0').val().length;
                    var fourCheck = $('#_Q33_Q3_Q0').val().length;
                    if(oneCheck < 1 || isNaN(rowOne))
                    {
                        var rowOne = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(twoCheck < 1 || isNaN(rowTwo))
                    {
                        var rowTwo = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(threeCheck < 1 || isNaN(rowThree))
                    {
                        var rowThree = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(fourCheck < 1 || isNaN(rowFour))
                    {
                        var rowFour = "0";
                        $('#customSum').css("color", "red");
                    }
                    var sumOne = parseInt(rowOne, 10) + parseInt(rowTwo, 10) + parseInt(rowThree, 10) + parseInt(rowFour, 10);
                    if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                    {
                        $('#customSum').css("background-color", "#e5f2fb");
                        $('#customSum').css("color", "green");
                        $('#customSum').text(sumOne);
                        $('#_Q33_Q0_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q1_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q2_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q3_Q0').css("background-color", "#e5f2fb");
                        if(oneCheck > 0 && twoCheck > 0 && threeCheck > 0 && fourCheck > 0)
                        {
                            if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                            {
                                $('#customSum').text(sumOne);
                                $('#topFour').html('<img src="http://surveys.researchresults.com/legacy/259/0067/checkmark.png">');                             
                                $('#topFour').css("background", "url(/checkmark.png) no-repeat");
                            }
                        }
                    }
                }

                if($('span.secondQual').length > 0) //-Second Loaded
                {
                    var rowOne = parseInt($('#_Q33_Q0_Q0').val(), 10);
                    var rowTwo = parseInt($('#_Q33_Q1_Q0').val(), 10);
                    var rowThree = parseInt($('#_Q33_Q2_Q0').val(), 10);
                    var rowFour = parseInt($('#_Q33_Q3_Q0').val(), 10);
                    var oneCheck = $('#_Q33_Q0_Q0').val().length;
                    var twoCheck = $('#_Q33_Q1_Q0').val().length;
                    var threeCheck = $('#_Q33_Q2_Q0').val().length;
                    var fourCheck = $('#_Q33_Q3_Q0').val().length;
                    if(oneCheck < 1 || isNaN(rowOne))
                    {
                        var rowOne = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(twoCheck < 1 || isNaN(rowTwo))
                    {
                        var rowTwo = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(threeCheck < 1 || isNaN(rowThree))
                    {
                        var rowThree = "0";
                        $('#customSum').css("color", "red");
                    }
                    if(fourCheck < 1 || isNaN(rowFour))
                    {
                        var rowFour = "0";
                        $('#customSum').css("color", "red");
                    }
                    var sumOne = parseInt(rowOne, 10) + parseInt(rowTwo, 10) + parseInt(rowThree, 10) + parseInt(rowFour, 10);
                    if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                    {
                        $('#customSum').css("background-color", "#e5f2fb");
                        $('#customSum').css("color", "green");
                        $('#customSum').text(sumOne);
                        $('#_Q33_Q0_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q1_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q2_Q0').css("background-color", "#e5f2fb");
                        $('#_Q33_Q3_Q0').css("background-color", "#e5f2fb");
                        if(oneCheck > 0 && twoCheck > 0 && threeCheck > 0 && fourCheck > 0)
                        {
                            if(rowOne >= 0 || rowOne <= 0 || rowTwo >= 0 || rowTwo <= 0 || rowThree >= 0 || rowThree <= 0 || rowFour >= 0 || rowFour <= 0)
                            {
                                $('#customSum').text(sumOne);
                                $('#topFour').html('<img src="http://surveys.researchresults.com/legacy/259/0067/checkmark.png">');
                                $('#topFour').css("background-image", "http://surveys.researchresults.com/legacy/259/0067/checkmark.png");
                                $('#topFour').css("background", "url(/checkmark.png) no-repeat");
                            }
                        }
                    }
                }

Thank you for updating my post Jamal, should I re-post to potentially get someone to condense my code? I do plan I having a go at it myself but would like to see other ideas and best practices. — Alexander Dixon, Jul 16 at 20:32

Alexander Dixon · Accepted Answer · 2015-07-20 04:33:29Z

jQuery offers concise DOM targeting and JavaScript has a very powerful function called setInterval(). When both are setup to compliment each other with the task of recognizing element states and user triggered events, it is possible to scale down large code iterations that stack when trying to account for multiple scenarios (unpredictable user input). I basically created one conditional statement that will check what state the input fields are in and run validation that sums all numeric input and returns the value in the last row. If all fields are numerical, a check box is displayed to give a more complete UI experience. I gladly welcome any additional feedback here on where my code could be more refined.

//Code Review 07-19-2015
//Reduce large lines of code by utilizing arrays, each, for, on change and setInterval
//Please ignore rows "B." & "C." as they are not the focus of this exercise.
//-Dynamically Add Input Count - Dixon, Alexander 2015
//Currently 53 lines down from 312. The "for" loop method was not utilized. Original found: https://jsfiddle.net/dixalex/d375u6Ln/

$('#customSum').closest('table').find('tr td:nth-child(2) input[type=text]').not(':last').addClass('rowA').css("border", "solid 1px black");

var checkValid = setInterval( function() {
    $("input.rowA").each(function(i){
        var totals = [0,0,0,0];
        var total = 0;
        if($('input.complete').length == $('input.rowA').length)
        {
            $('#topFour').html('<img src="http://www.alexldixon.com/images/checkmark.png">');
            $("input.rowA").each(function(i){
                $(this).css({"background-color": "#ffe", "border": "1px solid green", "border-left": "5px solid green"}).addClass("complete");
                items = $('input.rowA:eq(' + i + ')').val();
                if(!items.match(/^\d+$/))
                {
                    items = 0;
                    $('.rowA').on("keypress change", function(evt) {
                        $(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete");
                    });
                }
                items = parseInt($('input.rowA:eq(' + i + ')').val(), 10);
                totals.push(items);
            });
            total = 0; //ADD SUM LOGIC HERE: http://stackoverflow.com/questions/1230233/how-to-go-through-an-array-and-add-their-values (Tyler Carter)
            $.each(totals,function() {
                total += this;
            });
            $('#customSum').text(total);
        } else {
            $('#topFour').html('');
            totals = [0,0,0,0];
            $("input.rowA").each(function(i){
                var items = $('input.rowA:eq(' + i + ')').val();
                if(!items.match(/^\d+$/)) //Regular Expressions Source: http://www.regexlib.com/RETester.aspx?regexp_id=669
                {
                    items = 0;
                    $('.rowA').on("keypress change", function(evt) {
                        $(this).css({"background-color": "#ffe", "border": "1px solid red", "border-left": "5px solid red"}).removeClass("complete");
                    });
                } else {
                    items = parseInt($('input.rowA:eq(' + i + ')').val(), 10);
                    $(this).css({"background-color": "#ffe", "border": "1px solid green", "border-left": "5px solid green"}).addClass("complete");
                }
                totals.push(items);
            });
            total = 0; //ADD SUM LOGIC HERE: http://stackoverflow.com/questions/1230233/how-to-go-through-an-array-and-add-their-values (Tyler Carter)
            $.each(totals,function() {
                total += this;
            });
            $('#customSum').text(total);
        }
    });
}, 120);
$('#customSum').closest('table').find("td:contains('C.'), tr td:contains('B.')").closest('tr').toggle();

jsFiddle Demo

asked	1 month ago
viewed	66 times
active	1 month ago

current community

your communities

more stack exchange communities

jQuery Addition Calculator

1 Answer 1

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript beginner jquery html css or ask your own question.

Hot Network Questions

current community

your communities

more stack exchange communities

jQuery Addition Calculator

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript beginner jquery html css or ask your own question.

Related

Hot Network Questions