Javascript .change（）导致删除元素内容

我已经开始创建一个简单的每月付款估算器，我发现了一个奇怪的错误，只有当我更改术语选择选项时才会发生。如果使用滑块，每月付款将更新，并通过.digits方法在数字中添加逗号。但是，当您更改贷款期限时，它会清除所有数字。必须与.change和.digits冲突，因为如果删除它，.change方法将按预期工作。有什么想法吗

    $(document).ready(function() {
  $.fn.digits = function() {
    return this.each(function() {
      $(this).text(
        $(this)
          .text()
          .replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
      );
    });
  };

  function updateMonthlyPayment() {
    $loanAmount = $("#loan__amount span").html();
    $loanTerm = $("#loan__term option:selected").val();
    if ($loanTerm == "for 24 months") {
      $("#monthly__payment span")
        .html(Math.floor($loanAmount * 0.045878 / 100 * 100))
        .digits();
    } else if ($loanTerm == "for 36 months") {
      $("#monthly__payment span")
        .html(Math.floor($loanAmount * 0.032 / 100 * 100))
        .digits();
    } else if ($loanTerm == "for 48 months") {
      $("#monthly__payment span")
        .html(Math.floor($loanAmount * 0.025085 / 100 * 100))
        .digits();
    } else if ($loanTerm == "for 60 months") {
      $("#monthly__payment span")
        .html(Math.floor($loanAmount * 0.020963 / 100 * 100))
        .digits();
    }
  }

  $("#loan__amount__slider").slider({
    max: 125000,
    min: 5000, 
    step: 1000,
    value: 50000,
    create: function(event, ui) {
      $("#loan__amount__num")
        .position({
          my: "center bottom",
          at: "center top",
          of: ui.handle,
          offset: "0, 10"
        });
    },
    slide: function(event, ui) {
      $("#loan__amount span").html(ui.value);
      $("#loan__amount__num span").html(ui.value);
      updateMonthlyPayment();
      $("#loan__amount span").digits();
      $("#loan__amount__num span").digits();

      var delay = function() {
        var handleIndex = $(ui.handle).data("index.uiSliderHandle");
        $("#loan__amount__num")
          .position(
            {
              my: "center bottom",
              at: "center top",
              of: ui.handle,
              offset: "0, 10"
            }
          );
      };

      // wait for the ui.handle to set its position
      setTimeout(delay, 5);
    }
  });

  $("#loan__term").change(updateMonthlyPayment);
});

代码笔：

使用

$loanAmount = parseFloat($("#loan__amount span").html().replace(',',''));

您的$.html返回50000，当您对其进行数学运算时，得到NaN，当您设置$.htmlNaN时，得到一个空白。要解决这个问题，可以通过使用replace函数，然后解析值来删除

---

希望通过调试可以帮助您学习调试：我只是在html之前使用了console.log语句，它应该向找到的单元格中写入内容！，然后回到你的数学。。。然后返回50000导致错误。

使用滑块->首先计算速率，然后计算数字 通过选择->根据数字计算

因此，它的40000与滑块和40000与选择

速战速决

问题在于：

更改列表中的选定项， $loan\uu term.change…调用updateMonthlyPayment，

---

$loanAmount=$loan\uu amount span.html 最有问题的问题是，您没有将数据与演示分离。将格式化的值放入跨度中，然后从跨度中读回值，而不是使用变量，这是一个非常糟糕的主意，而且容易出错

当您可以在应用程序中使用值时，比较字符串也是如此。您应该直接从滑块抓取值，并直接从选择按钮抓取值

我彻底修改了代码：

常量利息={ 24: 0.045878, 36: 0.032, 48: 0.025085, 60: 0.020963 }; 康斯特贷款={ 最低：5000， 最高：125000， 步骤：1000 }; var初始金额=50000； $.fn.dollars=函数{ 返回this.eachfunction{ var n=Numberthis.innerHTML | | this.value.toLocaleStringen-US； $this.text$+n； }; }; 函数updateMonthlyPayment{ var loanAmount=$loan\u amount\u slider.slideroption，value； var loanTerm=$loan_uuterm.val； 每月支付$ .htmlMath.FLOWRLOANAMOUNT*利息[loanTerm] .美元； } $document.readyfunction{ $loan\u amount，loan\u amount\u num .textinitialAmount .美元； $loan\u min .textloan.min .美元； $loan\u max .textloan.max .美元； $loan\u term.changeupdateMonthlyPayment； $loan\uuu amount\uuu slider.slider{ 马克斯：loan.max， min:loan.min， 步骤：loan.step， 值：initialAmount， 幻灯片：functionevent，ui{ $loan\u amount.textui.value.dollars； $loan\u amount\u num.textui.value.dollars； 更新每月付款； var延迟=功能{ var handleIndex=$ui.handle.dataindex.uiSliderHandle； $loan\u amount\u num.position{ 我的：中底， 在：中上， of:ui.handle， 偏移量：0,10 }; }; //等待ui.handle设置其位置 setTimeoutdelay，5； } }; 更新每月付款； }; 贷款金额{ 显示：内联块； 位置：相对位置； } 借贷人{ 浮动：左； } 最大贷款额{ 浮动：对； } 滑块盒{ 背景色：ccc； 溢出：自动； } 融资额 金额：

估计每月付款 24个月 36个月 48个月 60个月

---

非常感谢你！你不仅解决了我的问题，还让我学到了一些东西。谢谢，科迪！这是个坏主意。真糟糕。将一个格式化的值放入DOM，然后像这样读回以进行计算，这是一个最好的例子，说明了如何不编程。没问题！正如Chris所说，这不是最好的方法，但我认为随着创建干净的程序的进一步进展，以及在需要优化时，您将学习如何设计程序。

  function updateMonthlyPayment() {
   $loanAmount = $("#loan__amount span").html().replace(",","");
     $loanTerm = $("#loan__term option:selected").val();
    if ($loanTerm == "for 24 months") {
        $("#monthly__payment span")
        .html(Math.floor($loanAmount * 0.045878 / 100 * 100))
        .digits();
    } else if ($loanTerm == "for 36 months") {
      $("#monthly__payment span")
        .html(Math.floor($loanAmount * 0.032 / 100 * 100))
        .digits();
    } else if ($loanTerm == "for 48 months") {
      $("#monthly__payment span")
        .html(Math.floor($loanAmount * 0.025085 / 100 * 100))
        .digits();
    } else if ($loanTerm == "for 60 months") {
      $("#monthly__payment span")
        .html(Math.floor($loanAmount * 0.020963 / 100 * 100))
        .digits();
    }
  }