2

作成中の計算アプリがあり、入力にコンマが表示され、コンマがあっても計算を実行できますが、出力を千区切りコンマで表示できません。私は考えられるほとんどすべてを試しました。誰か私がどこにいるのか教えてもらえますか?

これが私のスクリプトです：

    jQuery( document ).ready( function( $ ) {
            // SHOW OUTPUT DIV ONLY WHEN ALL FIELDS ARE COMPLETED
            $( '#calc-top' ).bind( 'keyup change', function() {
                var orderAmount = $( '#orderAmt' ).val().replace( '', ',' );
                if ( orderAmount !== "" && $( "#duration option:selected" ).val() !== "" && $( "#debitFreq option:selected" ).val() !== "" ) {
                    $( 'div#calc-bottom' ).css( 'display', 'block' );
                } else {
                    $( 'div#calc-bottom' ).css( 'display', 'none' );
                }
            } );
        } );

    jQuery(document).ready(function($){
        $("#orderAmt").keyup(function(event) {
            // skip for arrow keys
            if (event.which >= 37 && event.which <= 40) {
                event.preventDefault();
            }
            var $this = $(this);
            var num = $this.val().replace(/,/gi, "");
            var num2 = num.split(/(?=(?:[0-9]{3})+$)/).join(",");
            console.log(num2);
            // the following line has been simplified. Revision history contains original.
            $this.val(num2);
        });
        });
      // end jQuery

        // CALCULATE USER INPUT AND WRITE OUTPUT TO HTML ELEMENTS
        function calculate() {
            var orderAmt = parseFloat(document.getElementById( "orderAmt" ).value.replace(/,/g, ''));
            var duration = document.getElementById( "duration" ).value || 0;
            var debitFreq = document.getElementById( "debitFreq" ).value || 0;
            var outputAmt = document.getElementById( 'outputAmt' ) || 0;
            var numPayments = document.getElementById( 'numPayments' ) || 0;

            // CALCULATE NUMBER OF PAYMENTS
            if ( debitFreq == 7 ) {
                numPayments = Math.floor( duration / 7 );
            } else if ( debitFreq == 30 ) {
                numPayments = Math.floor( duration / 30 );
            }
            document.getElementById( 'numPayments' ).innerHTML = numPayments;

            // CALCULATE PAYMENT AMOUNT
            var stepA = (orderAmt / numPayments);
            var stepB = Math.floor( (((15 / 1000) * (duration / 360)) * 12) * orderAmt ) || 0;
            var stepC;
            if ( debitFreq == 7 ) {
                stepC = 0.10;
                //} else if (debitFreq == 30) {
                //stepC = 0.05;
            } else {
                stepC = 0;
            }
            var stepD = 0;
            //if ((duration == 30) && (debitFreq == 30)) {
            //stepD = 0.05;
            //} else {
            //stepD = 0;
            //}
            var stepE = stepC - stepD;
            var stepF = Math.floor( (((15 / 1000) * (duration / 360)) * 12) * orderAmt ) || 0;
            var stepG = Math.ceil( stepE * stepF );
            var stepH = stepB - stepG;
            var stepI = stepH / numPayments;
            var monthlyPayments = stepI + stepA;
            outputAmt.innerHTML = monthlyPayments.toFixed( 2 ) || 0;

            // OUTPUT WILL SHOW CORRECT DEBIT FORMATS BASED ON USER INPUT (i.e. 'week', 'weeks', 'month', 'months')
            var outputDefault1;
            if ( document.getElementById( "debitFreq" ).value == 7 ) {
                outputDefault1 = "week";
            } else if ( document.getElementById( "debitFreq" ).value == 30 ) {
                outputDefault1 = "month";
            }
            document.getElementById( "outputTerm1" ).innerHTML = outputDefault1;

            var outputDefault2;
            if ( document.getElementById( "debitFreq" ).value == 7 ) {
                outputDefault2 = "weeks";
            } else if ( document.getElementById( "debitFreq" ).value == 30 ) {
                outputDefault2 = "months";
            }
            document.getElementById( "outputTerm2" ).innerHTML = outputDefault2;

        }
        // end calculate function

        // ONLY ALLOW NUMERIC INPUT, NO ALPHA OR SPECIAL CHARACTERS EXCEPT COMMAS
        function isNumberKey( evt ) {
            var theEvent = evt || window.event;
            var key = theEvent.keyCode || theEvent.which;
            key = String.fromCharCode( key );
            var regex = /^[0-9.,]+$/;
            if ( !regex.test( key ) ) {
                theEvent.returnValue = false;
                if ( theEvent.preventDefault ) {
                    theEvent.preventDefault();
                }
            }
        }

        // TRIGGER EVENTS WHEN THE USER ENTERS DATA
        var userinputNum = document.getElementById( "orderAmt" );
        userinputNum.oninput = calculate;
        userinputNum.onkeypress = isNumberKey;

        var userinputDays = document.getElementById( "duration" );
        userinputDays.onchange = calculate;

        var userinputFreq = document.getElementById( "debitFreq" );
        userinputFreq.onchange = calculate;

これが私のフィドルです： http://jsfiddle.net/qo5b7z93/

どんな助けでも大歓迎です！

4

3 に答える 3

0

これを試して：

注: 以下の関数は、読みやすさ/理解を容易にするために非常に冗長です。おそらく本番用に単純化したいでしょう

あなたは変わるでしょう outputAmt.innerHTML = monthlyPayments.toFixed( 2 ) || 0
-->outputAmt.innerHTML = placeCommas(monthlyPayments);

function placeCommas(number) {
  if (number !== null && number !== undefined) {
    number = number.toFixed(2);
    var splitNum = number.split(".");
    var num = splitNum[0];
    var decimals = splitNum[1];

    var numArr = num.split("").reverse();
    var commaArr = [];
    for (var i = 0; i < numArr.length; i++) {
      commaArr.push(numArr[i]);
      if (i !== numArr.length - 1 && i % 3 === 2) {
        commaArr.push(",");
      }
    }
    num = commaArr.reverse().join("");
    number = num + "." + decimals;
    return number;
  }
}
console.log(placeCommas(0));
console.log(placeCommas(10));
console.log(placeCommas(100));
console.log(placeCommas(1000));
console.log(placeCommas(10000));
console.log(placeCommas(100000));
console.log(placeCommas(1000000));
console.log(placeCommas(10000000));
console.log(placeCommas(100000000));
console.log(placeCommas(1000000000));

于 2016-09-30T21:58:06.747 に答える