[英]How do i get the values to load when the page loads? Instead of NaN?
我一直在為客戶制作汽車租賃計算器。 它幾乎完成並且一切正常，包括計算和條件但我似乎無法讓我的計算器計算頁面加載的價格，只有在我按下其中一個單選按鈕后它才顯示價格而不是 NaN。
這是一種簡單的形式，使用 PHP 短代碼從服務器檢索數據，然后在計算中使用它們。
這是一個鏈接
這是我的代碼，這是我第一次真正從頭開始構建這樣的東西，所以任何提示和最佳實踐將不勝感激。
這是我用於 function 的 HTML 和 JavaScript。
我也在用 Jquery
謝謝
<body>
<div id="calculator">
<div class="resultat">
<label for="LeaseValue_html" >Pris pr. mdr. inkl. moms </label>
<input type="text" id="LeaseValue_html" value="2500" readonly="true">
</div>
<div class='py'>
<label for="lp" class="LeasingPeriodeCSS">Vælg leasingperiode</label>
</br>
<label id="label12">
<input id="leasingRadio" type="radio" value="12" class="option-input radio" name="example" checked />
12 mdr
</label>
<label id="label24">
<input id="leasingRadio" type="radio" value="24" class="option-input radio" name="example" />
24 mdr
</label>
<label id="label36">
<input id="leasingRadio" type="radio" value="36" class="option-input radio" name="example" />
36 mdr
</label>
</div>
</br>
<div class="range-control">
<input id="inputRange" type="range" min="15000" max="35000" step="5000" value="15000" data-thumbwidth="20">
<label> Km pr. år.:</label><p id="kmSliderValue" class="SliderResultat"> </p>
</div>
<div class="range-control">
<input id="inputRange1" type="range" min="10" max="60" step="5" value="10" data-thumbwidth="20">
</p><label> Ubetaling:</label><p id="downPaymentValue"class="SliderResultat">
</div>
<script>
$(document).ready(function() {
let total = 0;
let downPayment = 0;
// Hente de 3 total værdier forbundet med bilen
const total12 = document.getElementById( 'custom-field-1' );
// console.log( total12.innerHTML );
const total24 = document.getElementById( 'custom-field-2' );
// console.log( total24.innerHTML );
const total36 = document.getElementById( 'custom-field-3' );
// console.log( total36.innerHTML );
const leasingRadio = document.querySelectorAll("input[type=radio]");
let leaseVal;
const label12 = document.getElementById("label12");
const label24 = document.getElementById("label24");
const label36 = document.getElementById("label36");
for (let i = 0; i < leasingRadio.length; i++) {
if (parseFloat(total12.innerHTML) > 0) {
label12.style.display = "";
} else {
label12.style.display = "none";
}
if (parseFloat(total24.innerHTML) > 0) {
label24.style.display = "";
} else {
label24.style.display = "none";
}
if (parseFloat(total36.innerHTML) > 0) {
label36.style.display = "";
} else {
label36.style.display = "none";
}
}
for (let i = 0; i < leasingRadio.length; i++) {
leasingRadio[i].addEventListener('change', function() {
let value = this.value;
if (value === "12") {
leaseVal = parseFloat(total12.innerHTML);
} else if (value === "24") {
leaseVal = parseFloat(total24.innerHTML);
} else if (value === "36") {
leaseVal = parseFloat(total36.innerHTML);
}
// console.log(leaseVal);
});
}
// radio værdien til længden af leasingen
var leaseLenght = leasingRadio[0].value;
for (let i = 0; i < leasingRadio.length; i++) {
leasingRadio[i].addEventListener('change' , function() {
leaseLenght = this.value;
// console.log(leaseLenght);
});
}
// Get the input and output elements
var inputRange1El = $('#inputRange1');
var inputRangeEl = $('#inputRange');
var LeaseValue_html = document.getElementById("LeaseValue_html");
const downPaymentValue = document.getElementById("downPaymentValue");
const KmValue = document.getElementById("kmSliderValue");
// Calculate the total value based on the input ranges and the selected radio button
function calculateTotal() {
var inputRange1Value = inputRange1El.val();
var inputRangeValue = inputRangeEl.val();
var downPayment = (inputRange1Value/100) * leaseVal;
var kmSlider = parseFloat(inputRangeValue);
//Calculate the total value by adding the values of the input ranges and the radio button
var total = (leaseVal - downPayment)/leaseLenght + (kmSlider - 15000) / leaseLenght;
total = (Math.round(total * 100) / 100).toFixed(0);
downPayment = (Math.round(downPayment * 100) / 100).toFixed(0);
// Update the lease value field with the calculated total
LeaseValue_html.value = total;
downPaymentValue.innerHTML = downPayment.toLocaleString() + "kr";
KmValue.innerHTML = kmSlider.toLocaleString() + "km";
}
inputRangeEl.on('input', calculateTotal);
inputRange1El.on('input', calculateTotal);
$('input[type=radio]').on('change', calculateTotal);
$('input[type=radio]').on('input', calculateTotal);
$('input[type=range]').on('load', calculateTotal);
// Calculate the total value when the page loads
window.onload = function() {
calculateTotal(); // call the function on page load
var leasingRadio = document.querySelectorAll('input[type=radio]');
for (let i = 0; i < leasingRadio.length; i++) {
leasingRadio[i].addEventListener('change', calculateTotal); // call the function when the radio button value is changed
}
}
calculateTotal();
});
</script>
為什么它不對頁面加載進行計算？ 我究竟做錯了什么？
感謝您抽出時間來查看我的問題
你只需要初始化你的leaseVal ：
$(document).ready(() => { let total = 0; let downPayment = 0; // Hente de 3 total værdier forbundet med bilen const total12 = document.getElementById( 'leasing12' ); const total24 = document.getElementById( 'leasing24' ); const total36 = document.getElementById( 'leasing36' ); const leasingRadio = document.querySelectorAll("input[type=radio]"); let leaseVal = 12; const label12 = document.getElementById("label12"); const label24 = document.getElementById("label24"); const label36 = document.getElementById("label36"); for (let i = 0; i < leasingRadio.length; i++) { leasingRadio[i].addEventListener('change', function() { let value = this.value; leaseVal = parseFloat(value); }); } // radio værdien til længden af leasingen var leaseLenght = leasingRadio[0].value; for (let i = 0; i < leasingRadio.length; i++) { leasingRadio[i].addEventListener('change', function() { leaseLenght = this.value; // console.log(leaseLenght); }); } // Get the input and output elements var inputRange1El = $('#inputRange1'); var inputRangeEl = $('#inputRange'); var LeaseValue_html = document.getElementById("LeaseValue_html"); const downPaymentValue = document.getElementById("downPaymentValue"); const KmValue = document.getElementById("kmSliderValue"); // Calculate the total value based on the input ranges and the selected radio button function calculateTotal() { var inputRange1Value = inputRange1El.val(); var inputRangeValue = inputRangeEl.val(); var downPayment = (inputRange1Value/100) * leaseVal; var kmSlider = parseFloat(inputRangeValue); //Calculate the total value by adding the values of the input ranges and the radio button var total = (leaseVal - downPayment)/leaseLenght + (kmSlider - 15000) / leaseLenght; total = (Math.round(total * 100) / 100).toFixed(0); downPayment = (Math.round(downPayment * 100) / 100).toFixed(0); // Update the lease value field with the calculated total LeaseValue_html.value = total; downPaymentValue.innerHTML = downPayment.toLocaleString() + "kr"; KmValue.innerHTML = kmSlider.toLocaleString() + "km"; } inputRangeEl.on('input', calculateTotal); inputRange1El.on('input', calculateTotal); $('input[type=radio]').on('change', calculateTotal); $('input[type=radio]').on('input', calculateTotal); $('input[type=range]').on('load', calculateTotal); // Calculate the total value when the page loads window.onload = function() { calculateTotal(); // call the function on page load var leasingRadio = document.querySelectorAll('input[type=radio]'); for (let i = 0; i < leasingRadio.length; i++) { leasingRadio[i].addEventListener('change', calculateTotal); // call the function when the radio button value is changed } } calculateTotal(); }); </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div id="calculator"> <div class="resultat"> <label for="LeaseValue_html" >Pris pr. mdr. inkl. moms </label> <input type="text" id="LeaseValue_html" value="2500" readonly="true"> </div> <div class='py'> <label for="lp" class="LeasingPeriodeCSS">Vælg leasingperiode</label> </br> <input id="leasing12" type="radio" value="12" class="option-input radio" name="leasingRadio" checked /> <label id="label12" for="leasing12">12 mdr</label> <input id="leasing24" type="radio" value="24" class="option-input radio" name="leasingRadio" /> <label id="label24" for="leasing24">24 mdr</label> <input id="leasing36" type="radio" value="36" class="option-input radio" name="leasingRadio" /> <label id="label36" for="leasing36">36 mdr</label> </div> </br> <div class="range-control"> <label> Km pr. år.:</label> <input id="inputRange" type="range" min="15000" max="35000" step="5000" value="15000" data-thumbwidth="20"> <p id="kmSliderValue" class="SliderResultat"></p> </div> <div class="range-control"> <label> Ubetaling:</label> <input id="inputRange1" type="range" min="10" max="60" step="5" value="10" data-thumbwidth="20"> <p id="downPaymentValue" class="SliderResultat"> </p> </div> </div> </body> <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
直到單擊事件后才加載畫布圖像...我想在頁面加載時加載，如何？
[英]Canvas images do not load until click event… I want to load when page loads, how?
如何在 <html:select> 頁面何時加載？
[英]How do I display the selected values in an <html:select> when the page loads?
當頁面使用JavaScript / jQuery加載時，如何獲取選擇框的第一個選項以自動顯示在div中？
[英]How do I get the first option of a select box to display in a div automatically when the page loads with JavaScript/jQuery?
當我在具有數值的數組上調用它時，我的 math.pow 將返回 NaN。 如何獲得數組元素的平方
[英]My math.pow is return NaN when I call it on an array with numerical values. How do I get the square of an array element
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.