Question

卡住了。在控制台中，每个选定的项目都显示为number，但是当我想通过单击#btnCalculate对其进行汇总时，结果始终是0。只有loan_car和casco_v总计为number。我猜这是在gap_v，ns_v和tpl_v可能是string的情况下犯的错误。修复它的简单方法是什么？欣赏您的价值

$(function() {

  $("input[class=input1]").keyup(function() {

    var sum1 = Number($("#carPrice").val());
    var sum2 = Number($("#deposit").val());

    $("#carLoan").val(sum1 - sum2);
  });

  $("#gapList").change(function() {

    var gap_value = $(this).val();
    var gap_result_value = $("#gapListResult").val();
    var $car_cost = $("#carPrice").val();
    var $gap_amount_one = Number(0.010);
    var $gap_amount_two = Number(0.020);
    var $gap_amount_three = Number(0.030);
    var $gap_result_one = function() {
      return Number($car_cost * $gap_amount_one)
    };
    var $gap_result_two = function() {
      return $car_cost * $gap_amount_two
    };
    var $gap_result_three = function() {
      return $car_cost * $gap_amount_three
    };

    if (gap_value == "1") {
      gap_result_value = $gap_result_one();
    } else if (gap_value == "2") {
      gap_result_value = $gap_result_two();
    } else if (gap_value == "3") {
      gap_result_value = $gap_result_three();
    } else {
      gap_result_value = Number(0);
    }
    console.log(gap_result_value);
  }); // works


  $("#nsList").change(function() {

    var ns_value = $(this).val();
    var ns_result_value = $("nsListResult").html();

    if (ns_value == "1") {
      ns_result_value = Number(500);
    } else if (ns_value == "2") {
      ns_result_value = Number(1000);
    } else if (ns_value == "3") {
      ns_result_value = Number(1500);
    } else {
      ns_result_value = Number(0);
    }

    console.log(ns_result_value);

  }); // works


  $("#btnReload").click(function() {
    window.location.reload();
  });

  $("#btnCalculate").click(function() {

    var loan_car = parseFloat($("#carLoan").val()) || 0; // works
    var casco_v = parseFloat($("#costCasco").val()) || 0; // works
    var gap_v = parseFloat($("#gapListResult").val()) || 0; // doesn't work
    var ns_v = parseFloat($("#nsListResult").val()) || 0; // doesn't work
    var tpl_v = parseFloat($("#tplListResult").val()) || 0; // doesn't work

    var loan_sum = loan_car + casco_v + gap_v +
      ns_v + tpl_v;


    $("#totalLoanResult").html(loan_sum);
    console.log(loan_sum);
  });


});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


</head>

<body>

  <div class="tablet">

    <input type="text" class="input1" id="carPrice"> Sum1
    <input type="text" class="input1" id="deposit"> Sum2
    <input type="text" class="result" style="display:none" id="carLoan">

    <div id="application2">
      <input type="text" class="input2 result" id="costCasco"> Sum3
    </div>

    <select class="dropdown1" id="gapList">
      <option value="0">0 </option>
      <option value="1"> 1y</option>
      <option value="2"> 2y</option>
      <option value="3"> 3y</option>
    </select>

    <input type="text" class="result" id="gapListResult" style="display:none">


    <select class="dropdown1" id="nsList">
      <option value="0"> 0 </option>
      <option value="1"> 1 y</option>
      <option value="2"> 2 y</option>
      <option value="3"> 3 y</option>
    </select>
    <div class="result" style="display:none" id="nsListResult"></div>



    <button type="button" id="btnCalculate"> Calc  </button>

    <button type="button" id="btnReload"> Reload </button>


  </div>

  <div id="totalLoanResult">Result:</div>

Answer 1

首先，gap_result_value和ns_result_value是局部变量。

$("#gapList").change(function() {
    var gap_value = $(this).val();
    var gap_result_value = $("#gapListResult").val();
    console.log(gap_result_value);
}); // works

您不能在其他地方使用gap_result_value。这就是为什么您在控制台中看到corect编号的原因。

第二，如果您更改gap_result_value的值，则此更改将不会影响#gapListResult;

$("#btnCalculate").click(function() {
    var gap_v = parseFloat($("#gapListResult").val()) || 0; // doesn't work

    var loan_sum = loan_car + casco_v + gap_v +ns_v + tpl_v;

    $("#totalLoanResult").html(loan_sum);
});

这就是为什么不起作用。 #gapListResult没有值

尝试一下：插入$（“＃gapListResult”）。val（gap_result_value）;在$（“＃gapList”）。change（function（）{}结尾。插入$（“＃nsListResult”）。val（ns_result_value）;在$（“＃nsList”）。change（function（）{}内部最后。

而且您在这里也误了＃：var ns_result_value = $（“ nsListResult”）。html（）;

$(function() {

  $("input[class=input1]").keyup(function() {

    var sum1 = Number($("#carPrice").val());
    var sum2 = Number($("#deposit").val());

    $("#carLoan").val(sum1 - sum2);
  });

  $("#gapList").change(function() {

    var gap_value = $(this).val();
    var gap_result_value = $("#gapListResult").val();
    var $car_cost = $("#carPrice").val();
    var $gap_amount_one = Number(0.010);
    var $gap_amount_two = Number(0.020);
    var $gap_amount_three = Number(0.030);
    var $gap_result_one = function() {
      return Number($car_cost * $gap_amount_one)
    };
    var $gap_result_two = function() {
      return $car_cost * $gap_amount_two
    };
    var $gap_result_three = function() {
      return $car_cost * $gap_amount_three
    };

    if (gap_value == "1") {
      gap_result_value = $gap_result_one();
    } else if (gap_value == "2") {
      gap_result_value = $gap_result_two();
    } else if (gap_value == "3") {
      gap_result_value = $gap_result_three();
    } else {
      gap_result_value = Number(0);
    }
    console.log(gap_result_value);
    $("#gapListResult").val(gap_result_value); //******
  }); // works


  $("#nsList").change(function() {

    var ns_value = $(this).val();
    var ns_result_value = $("#nsListResult").html(); //******

    if (ns_value == "1") {
      ns_result_value = Number(500);
    } else if (ns_value == "2") {
      ns_result_value = Number(1000);
    } else if (ns_value == "3") {
      ns_result_value = Number(1500);
    } else {
      ns_result_value = Number(0);
    }

    console.log(ns_result_value);
    $("#nsListResult").val(ns_result_value); //******
  }); // works


  $("#btnReload").click(function() {
    window.location.reload();
  });

  $("#btnCalculate").click(function() {

    var loan_car = parseFloat($("#carLoan").val()) || 0; // works
    var casco_v = parseFloat($("#costCasco").val()) || 0; // works
    var gap_v = parseFloat($("#gapListResult").val()) || 0; // doesn't work
    var ns_v = parseFloat($("#nsListResult").val()) || 0; // doesn't work
    var tpl_v = parseFloat($("#tplListResult").val()) || 0; // doesn't work

    var loan_sum = loan_car + casco_v + gap_v +
      ns_v + tpl_v;


    $("#totalLoanResult").html(loan_sum);
    console.log(loan_sum);
  });


});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


</head>

<body>

  <div class="tablet">

    <input type="text" class="input1" id="carPrice"> Sum1
    <input type="text" class="input1" id="deposit"> Sum2
    <input type="text" class="result" style="display:none" id="carLoan">

    <div id="application2">
      <input type="text" class="input2 result" id="costCasco"> Sum3
    </div>

    <select class="dropdown1" id="gapList">
      <option value="0">0 </option>
      <option value="1"> 1y</option>
      <option value="2"> 2y</option>
      <option value="3"> 3y</option>
    </select>

    <input type="text" class="result" id="gapListResult" style="display:none">


    <select class="dropdown1" id="nsList">
      <option value="0"> 0 </option>
      <option value="1"> 1 y</option>
      <option value="2"> 2 y</option>
      <option value="3"> 3 y</option>
    </select>
    <div class="result" style="display:none" id="nsListResult"></div>



    <button type="button" id="btnCalculate"> Calc  </button>

    <button type="button" id="btnReload"> Reload </button>


  </div>

  <div id="totalLoanResult">Result:</div>

Answer 2

$("#nsListResult").val()，这是一个包含空文本的隐藏输入字段。

如果您解析并清空String，则会得到NaN

试试看

$("#nsListResult").val(); //returns NaN (Not a Number) if you parse it to float because $("#nsListResult").val() returns ""

// try this on the values which are not working:
!isNaN(parseFloat($("#nsListResult").val())) ? parseFloat($("#nsListResult").val()) : 0

因此，如果解析操作是一个数字，则返回该数字，否则返回0

所选项目总计未汇总

2 个答案: