J'ai une calculatrice de prêt, cela fonctionne parfaitement en utilisant les éléments inout comme entrées de curseur mais mon client veut entrer les valeurs manuellement et ne veut pas utiliser le curseur, lorsque je change les propriétés du curseur dans mon html pour la zone de saisie ne marche pas.
Voici Puisque mon site fonctionne sur le serveur de test http, vous pouvez avoir une erreur de sécurité, vous pouvez contourner cela et continuer à vérifier le site.
$(document).ready(function(){
$("#la").bind(
"slider:changed", function (event, data) {
$("#la_value").html(data.value.toFixed(0));
calculateEMI();
}
);
$("#nm").bind(
"slider:changed", function (event, data) {
$("#nm_value").html(data.value.toFixed(0));
calculateEMI();
}
);
$("#roi").bind(
"slider:changed", function (event, data) {
$("#roi_value").html(data.value.toFixed(2));
calculateEMI();
}
);
function calculateEMI(){
var loanAmount = $("#la_value").html();
var numberOfMonths = $("#nm_value").html();
var rateOfInterest = $("#roi_value").html();
var monthlyInterestRatio = (rateOfInterest/100)/12;
var top = Math.pow((1+monthlyInterestRatio),numberOfMonths);
var bottom = top -1;
var sp = top / bottom;
var emi = ((loanAmount * monthlyInterestRatio) * sp);
var full = numberOfMonths * emi;
var interest = full - loanAmount;
var int_pge = (interest / full) * 100;
$("#tbl_int_pge").html(int_pge.toFixed(2)+" %");
//$("#tbl_loan_pge").html((100-int_pge.toFixed(2))+" %");
var emi_str = emi.toFixed(2).toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
var loanAmount_str = loanAmount.toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
var full_str = full.toFixed(2).toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
var int_str = interest.toFixed(2).toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
$("#emi").html(emi_str);
$("#tbl_emi").html(emi_str);
$("#tbl_la").html(loanAmount_str);
$("#tbl_nm").html(numberOfMonths);
$("#tbl_roi").html(rateOfInterest);
$("#tbl_full").html(full_str);
$("#tbl_int").html(int_str);
var detailDesc = "<thead><tr class='table-head'><th>Payment No.</th><th>Begining Balance</th><th>Monthly Payments</th><th>Principal</th><th>Interest</th><th>Ending Balance</th></thead><tbody>";
var bb=parseInt(loanAmount);
var int_dd =0;var pre_dd=0;var end_dd=0;
for (var j=1;j<=numberOfMonths;j++){
int_dd = bb * ((rateOfInterest/100)/12);
pre_dd = emi.toFixed(2) - int_dd.toFixed(2);
end_dd = bb - pre_dd.toFixed(2);
detailDesc += "<tr><td>"+j+"</td><td>"+bb.toFixed(2)+"</td><td>"+emi.toFixed(2)+"</td><td>"+pre_dd.toFixed(2)+"</td><td>"+int_dd.toFixed(2)+"</td><td>"+end_dd.toFixed(2)+"</td></tr>";
bb = bb - pre_dd.toFixed(2);
}
detailDesc += "</tbody>";
$("#loantable").html(detailDesc);
}
calculateEMI();
});
<!-- content start -->
<div class="container">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="wrapper-content bg-white pinside40">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
<div class="bg-light pinside40 outline">
<span>Loan Amount is </span>
<strong>
<span class="pull-right" id="la_value">30000</span></strong>
<input type="text" data-slider="true" value="30000" data-slider-range="100000,5000000" data-slider-step="10000" data-slider-snap="true" id="la">
<hr>
<span>No. of Month is <strong>
<span class="pull-right" id="nm_value">30</span> </strong>
</span>
<input type="text" data-slider="true" value="30" data-slider-range="120,360" data-slider-step="1" data-slider-snap="true" id="nm">
<hr>
<span>Rate of Interest [ROI] is <strong><span class="pull-right" id="roi_value">10</span>
</strong>
</span>
<input type="text" data-slider="true" value="10.2" data-slider-range="8,16" data-slider-step=".05" data-slider-snap="true" id="roi">
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="bg-light pinside30 outline">
Monthly EMI
<h2 id='emi' class="pull-right"></h2>
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="bg-light pinside30 outline">
Total Interest
<h2 id='tbl_int' class="pull-right"></h2>
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="bg-light pinside30 outline"> Payable Amount
<h2 id='tbl_full' class="pull-right"></h2></div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="bg-light pinside30 outline">
Interest Percentage
<h2 id='tbl_int_pge' class="pull-right"></h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div id="loantable" class='table table-striped table-bordered loantable table-responsive'></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.content end -->
3 Réponses :
Vous avez un champ de saisie masqué sous le curseur afin que vous puissiez utiliser ce champ. Vous n'avez pas à en créer un autre car js et / ou le langage côté serveur prennent définitivement la valeur de ce champ.
Vous cherchez probablement quelque chose comme ce calculateur calculateur hypothécaire
que vous pouvez modifier en tapant du texte et obtenez la valeur de l'entrée! supprimez tout ce qui concerne le curseur et ajoutez uniquement l'entrée
Changez-le de
$("#la").change(function(event, data){
$("#la_value").html(data.value.toFixed(0));
calculateEMI();});
À quelque chose comme ça
$("#la").bind(
"slider:changed", function (event, data) {
$("#la_value").html(data.value.toFixed(0));
calculateEMI();
}
);
J'ai effectué les modifications mais il ne calcule pas lorsque j'entre manuellement les valeurs. Il utilise également un simple curseur js, je l'ajoute pour référence.
Depuis jQuery 3.0, bind () est obsolète, pensez à utiliser on () .
Pour changer votre curseur en entrée, vous devez changer slider: changé en événement input et changer enFixed () en parseInt ou parseFloat
<script src="/pio2018/static/cssnew/js/simple-slider.js"></script>
et n'oubliez pas de supprimer
$("#la").on("input", function() {
$("#la_value").html(parseInt(this.value));
calculateEMI();
});
$("#nm").on("input", function() {
$("#nm_value").html(parseInt(this.value));
calculateEMI();
});
$("#roi").on("input", function() {
$("#roi_value").html(parseFloat(this.value));
calculateEMI();
});
p>
Les questions demandant une aide au débogage ("pourquoi ce code ne fonctionne-t-il pas?") Doivent inclure le comportement souhaité, un problème ou une erreur spécifique et le code le plus court nécessaire pour le reproduire dans la question elle-même .