php 当页面加载时，我如何获得要加载的值？而不是NaN？

zzzyeukh  于 2023-01-19  发布在  PHP
关注(0)|答案(1)|浏览(99)

我一直在为客户做一个汽车租赁计算器。它几乎完成了，一切都很好地工作，包括计算和条件，但我似乎无法使我的计算器计算页面加载的价格，只有当我按下单选按钮之一，它显示的价格，而不是NaN。
它是一个简单的表单，使用PHP短代码从服务器检索数据，然后在计算中使用它们。
这是一个link
这是我的代码，这是我第一次从零开始构建这样的东西，所以任何提示和最佳实践都将非常感谢。
下面是我为该函数使用的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>

为什么它不计算页面负载？我做错了什么？
谢谢你从一天中抽出时间来看我的问题

php

1条答案

按热度按时间
7gcisfzg

7gcisfzg1#

您只需要初始化您的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>
赞(0）分享  回复(0）举报  2023-01-19
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com