所选项目不总计

问题描述 投票：1回答：2

被困。在控制台中，每个选定的项目显示为number，但是当我想通过单击#btnCalculate来总结它们时，结果始终是0。只有loan_car和casco_vsum总计作为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>
javascript jquery
2个回答
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。这就是为什么你在控制台中看到正确的数字。

第二，如果你改变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”）。更改（function（）{}最后。插入$（“＃nsListResult”）。val（ns_result_value）;内部$（“＃nsList”）。change（function（）{}在末尾。

而且你错过了＃here：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>
0
投票

$("#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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.