Question

我完成了一个储蓄计算器，但我意识到如果储蓄输出为负数，我想显示一个不同的div和替代选项。我尝试了一些不同的东西，并没有效果。我是jQuery的新手，我遇到了一些麻烦。任何帮助表示赞赏。以下是我的代码：

    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

您的代码中存在一些逻辑错误，导致其无法按预期工作。第一个错误是常见的，严重的和可预防的：

忘记申报变数。

在您的代码中，totalSavings用于两个范围，但其中一个忽略了声明它。

要防止此错误，并提供增强的性能和安全性，请始终使用"use strict";启动每个脚本以启用ES5严格模式。

在严格模式下，未声明的变量会引发错误。

此外，切换错误本身是由于将if，if (totalSavings < 0)语句放在全局范围内而不是在compute函数或事件处理程序本身中。

如果未能声明totalSavings变量，同时使条件最初为假，则undefined既不大于也不小于0。

我已在下面的代码中更正了这些错误。

'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>

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

1 个答案: