如果输出小于零，则隐藏输出

Question

I finished a savings calculator but I realized that I want to display a different div with alternative options if the savings output is a negative number. I have tried a few different things and nothings has worked. I am newer to jQuery and I am having a bit of trouble. Any help is appreciated. Below is my code:

    function toCurrency(str) {
    let ret = parseFloat(str[0] === '$' ? str.substr(1) : str).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    if (!isNaN(ret))
    return str;
    return ret;
}

function calculate(){
 var savingsVal = (jQuery('#savingsVal').val());
 var totalSavings = 0;
 var regType = (jQuery('#reg-type').val());



 if (filterValues(savingsVal)) {
 totalSavings = savingsVal * 0.15 * 3 - regType * 3;
 }
 jQuery('#totalSavings').val('$' + toCurrency(totalSavings));
 }

if (totalSavings < 0) {
    jQuery("#negative-numbers").show();
}

else{
  jQuery("#negative-numbers").hide();
}




 function filterValues(eVal){
 return true;

 }

 jQuery('.results-area').hide();

 jQuery('#calculator').submit(function(e){
 e.preventDefault();
 calculate();
 jQuery('.results-area').show("slow");
 });

Answer 1

You have some logical errors in your code that are preventing it from working as expected. The number 1 mistake, is common, serious and preventable:

Forgetting to declare a variable.

In your code, totalSavings is used in two scopes but one of them neglects to declare it.

To prevent this error, and to provide enhanced performance and security, always start every script with "use strict"; to enable ES5 strict mode.

Under strict mode, undeclared variables throw an error.

Furthermore, the toggling error itself was due to placing your if, if (totalSavings < 0) statement in global scope instead of within the calculate function or the event handler itself.

Coupled with failing to declare the totalSavings variable, making the condition initially false as well, undefined is neither greater than nor less than 0 .

I have corrected these errors in the code below.

 'use strict'; (function() { var totalSavings = 0; function toCurrency(value) { let result = parseFloat( value[0] === '$' ? value.substr(1) : value ).toFixed(2).toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ','); return isNaN(result) ? value : result; } function calculate() { var savingsVal = jQuery('#savingsVal').val(); var totalSavings = 0; var regType = jQuery('#reg-type').val(); if (filterValues(savingsVal)) { totalSavings = savingsVal * 0.15 * 3 - regType * 3; } return totalSavings; } function filterValues(eVal) { return true; } jQuery('#calculator').click(function(e) { e.preventDefault(); totalSavings = calculate(); jQuery('.results-area').show("slow"); jQuery('#totalSavings').text('$' + toCurrency(totalSavings)); if (totalSavings < 0) { jQuery('#negative-numbers') .show() .find('#negative-value') .text(totalSavings) .show(); jQuery('.results-area').hide(); } else { jQuery('#negative-numbers').hide(); } }); }()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <label>Reg Type</label> <input type="text" id="reg-type"> <br> <label>Savings</label> <input type="text" id="savingsVal"> <br> <button id="calculator">Submit</button> <div></div> <div id="negative-numbers">Negative Numbers <div id="negative-value"></div> </div> <div class="results-area">Results <div id="totalSavings">Total </div> </div>