如何使用jQuery正确计算输入值?

时间:2019-06-26 14:08:24

标签: javascript jquery

我无法获得想要的结果。用户在字段中输入数字后,我使用公式进行计算并将结果存储在totalValue

jQuery(document).ready(function(){

    jQuery('#calculateBoiler').click(function() {

        // Get Rooms Area Value

        function getRoomsArea () {
            var roomsArea = jQuery("#roomsarea").val()
            var roomsAreaNew = parseInt(roomsArea).toFixed(1);
            console.log(roomsAreaNew);
            return roomsAreaNew;
        }

        // Get RoomsHeight Value

        function getRoomsHeight () {
            var roomsHeight = jQuery("#roomsheight").val();
            var roomsHeightNew = parseInt(roomsHeight).toFixed(1);
            console.log(roomsHeightNew);
            return roomsHeightNew;
        }


        // Get Typos Ktitiou Value 

         function getBuildingType() {
             var buildtypeVal =  jQuery('input[name=selectedbuilding]:checked').val();
             console.log(buildtypeVal);
             return buildtypeVal;
        }

       // Get Zesto Nero Value

         function getHotWater() {
             var hotWaterVal =  jQuery('input[name=selectedwater]:checked').val();
             console.log(hotWaterVal);
             return hotWaterVal;
        }

         // Get Elaxisti Thermokrasia Perioxis

          function tempLocation() {
             var tempVal =  jQuery('input[name=selectedTemp]:checked').val();
            console.log(tempVal);
             return tempVal;
       }

        // Get Monwsh Ktiriou Value

        function getThermalInsulation() {
             var monwsh = (jQuery('#thermalinsulation :selected').val());
             console.log(monwsh);
             return monwsh;
        }

          var totalValue = (getRoomsArea () * getRoomsHeight () * 50) * (getThermalInsulation() * getBuildingType() * tempLocation()) + getHotWater();
           var result = (Math.round(totalValue / 100)).toFixed(2);
            console.log(result);


          // Calculations 


           switch (result) {

            case (totalValue == 0 || isNaN(totalValue)):
                     jQuery('#result').show();
                     jQuery('#result').html('<p style="color: red; text-align: center;">Οι τιμές δεν μπορεί να είναι κενές ή 0. Ξαναπροσπαθήστε!</p>');
             break;

             case (result <= 29000):
                      jQuery('#result').show();
                      jQuery('#result').html( '<h4> <span style="color: #fff; font-size: 16px; display: block; margin-bottom: 10px;">Σύμφωνα με τα δεδομένα που καταχωρήσατε προτεινόμενος λέβητας είναι  </span>  KPP20 ή PB26 </h4>' );
                      jQuery('#result').append('<img class="boiler-result" src="/wp-content/uploads/2019/06/revo-line-min-1.png">');
                      jQuery('#result').append('<a class="nectar-button large regular result-btn" href="/revo-line"> Περισσότερα </a> ');   
             break;

             case (result > 29000 && result <= 35000):
                      jQuery('#result').show();
                      jQuery('#result').html( '<h4> <span style="color: #fff; font-size: 16px; display: block; margin-bottom: 10px;">Σύμφωνα με τα δεδομένα που καταχωρήσατε προτεινόμενος λέβητας είναι  </span>  KPP25 ή PB35 </h4>' );
                      jQuery('#result').append('<img class="boiler-result" src="/wp-content/uploads/2019/06/revo-line-min-1.png">');
                      jQuery('#result').append('<a class="nectar-button large regular result-btn" href="/revo-line"> Περισσότερα </a> ');   
             break;
             case (result > 35000 && result <= 40000):
                      jQuery('#result').show();
                      jQuery('#result').html( '<h4> <span style="color: #fff; font-size: 16px; display: block; margin-bottom: 10px;">Σύμφωνα με τα δεδομένα που καταχωρήσατε προτεινόμενος λέβητας είναι  </span>  KPP34 ή PB35 </h4>' );
                      jQuery('#result').append('<img class="boiler-result" src="/wp-content/uploads/2019/06/revo-line-min-1.png">');
                      jQuery('#result').append('<a class="nectar-button large regular result-btn" href="/revo-line"> Περισσότερα </a> ');   
             break;
             case (result > 40000 && result <= 45000):
                      jQuery('#result').show();
                      jQuery('#result').html( '<h4> <span style="color: #fff; font-size: 16px; display: block; margin-bottom: 10px;">Σύμφωνα με τα δεδομένα που καταχωρήσατε προτεινόμενος λέβητας είναι  </span>  KPP34 ή PB44 </h4>' );
                      jQuery('#result').append('<img class="boiler-result" src="/wp-content/uploads/2019/06/revo-line-min-1.png">');
                      jQuery('#result').append('<a class="nectar-button large regular result-btn" href="/revo-line"> Περισσότερα </a> ');   
             break;
             case (result > 45000 && result <= 75000):
                      jQuery('#result').show();
                      jQuery('#result').html( '<h4> <span style="color: #fff; font-size: 16px; display: block; margin-bottom: 10px;">Σύμφωνα με τα δεδομένα που καταχωρήσατε προτεινόμενος λέβητας είναι  </span>  KPP62 ή PB70 </h4>' );
                      jQuery('#result').append('<img class="boiler-result" src="/wp-content/uploads/2019/06/revo-line-min-1.png">');
                      jQuery('#result').append('<a class="nectar-button large regular result-btn" href="/revo-line"> Περισσότερα </a> ');   
             break;
             case (result > 75000 && result <= 100000):
                      jQuery('#result').show();
                      jQuery('#result').html( '<h4> <span style="color: #fff; font-size: 16px; display: block; margin-bottom: 10px;">Σύμφωνα με τα δεδομένα που καταχωρήσατε προτεινόμενος λέβητας είναι  </span> PB90 </h4>' );
                      jQuery('#result').append('<img class="boiler-result" src="/wp-content/uploads/2019/06/revo-line-min-1.png">');
                      jQuery('#result').append('<a class="nectar-button large regular result-btn" href="/revo-line"> Περισσότερα </a> ');   
             break;

             default:
                     jQuery('#result').show();
                     jQuery('#result').html('<p style="color: red; text-align: center;">BOOOOO!</p>');
              break;     
           }










    });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="" id="boilerpowerForm" onsubmit="return false;">

 <div class="vc_column-inner">
  <div class="wpb_wrapper">
    <div class="vc_col-sm-4">
            <label class="control-label" for="kmkPowierzchnia">Τετραγωνικά κτιρίου</label>
        <div class="input-group">
            <input type="number" placeholder="Εισάγετε τετραγωνικά π.χ. 20" name="roomsarea" class="form-control" id="roomsarea" value="132">
            <span class="input-group-addon">m²</span> 
        </div>
<label class="control-label">Τύπος κτιρίου</label>
           <li> <input type="radio"  name="selectedbuilding" value="1.00" checked> Κατοικία (21°C) </li>
           <li> <input type="radio"  name="selectedbuilding" value="0.80"> Επαγγελματικός χώρος(18°C) </li>

    </div>

    <div class="vc_col-sm-4">
        <label class="control-label">Ύψος κτιρίου</label>
        <div class="input-group">
            <input type="number" placeholder="Εισάγετε ύψος π.χ. 2.3" name="roomsheight" class="form-control" id="roomsheight" value="2.5">
            <span class="input-group-addon">m</span> 
        </div>
<label class="control-label">Ζεστό νερό χρόνος</label>
           <li> <input type="radio"  name="selectedwater" value="0.00" checked> none </li>
           <li> <input type="radio"  name="selectedwater" value="3.000"> < 200 l </li>
           <li> <input type="radio"  name="selectedwater" value="6.000"> > 200 l </li>
     </div>

<div class="vc_col-sm-4">
        <label class="control-label">Μόνωση</label>
        <div class="input-group">
                <select id="thermalinsulation" placeholder="Εισάγετε τετραγωνικά" class="form-control" name="thermalinsulation">
                        <option value="1.20">None</option>
                        <option value="1.00">5cm</option>
                        <option value="0.80">10cm</option>
                        <option value="0.70">15cm</option>
                   </select>
        </div>
<label class="control-label">Ελάχιστη εξωτερική θερμοκρασία περιοχής</label>
           <li> <input type="radio"  value="1.00" name="selectedTemp" checked>  0°C - 5°C  </li>
           <li> <input type="radio"  value="1.20" name="selectedTemp"> -5°C - 10°C </li>
           <li> <input type="radio"  value="1.30" name="selectedTemp"> -10°C - 20°C </li>
   </div>
</div>


<div class="vc_column-inner">
            <div class="wpb_wrapper">
   <div class="vc_col-sm-12">
     <a class="calc-btn" href="#" id="calculateBoiler">SELECT BOILER</a>
   </div>

</div>
</div>

<div class="vc_column-inner">
            <div class="wpb_wrapper">
   <div class="vc_col-sm-12">
    <div id="result">
         <p></p>
      </div>
</div>
</div>
</div>

</form>

我希望输出15.840,我会得到1584.00

2 个答案:

答案 0 :(得分:0)


<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="" id="boilerpowerForm" onsubmit="return false;">

 <div class="vc_column-inner">
  <div class="wpb_wrapper">
    <div class="vc_col-sm-4">
            <label class="control-label" for="kmkPowierzchnia">Τετραγωνικά κτιρίου</label>
        <div class="input-group">
            <input type="number" placeholder="Εισάγετε τετραγωνικά π.χ. 20" name="roomsarea" class="form-control" id="roomsarea" value="132">
            <span class="input-group-addon">m²</span> 
        </div>
<label class="control-label">Τύπος κτιρίου</label>
           <li> <input type="radio"  name="selectedbuilding" value="1.00" checked> Κατοικία (21°C) </li>
           <li> <input type="radio"  name="selectedbuilding" value="0.80"> Επαγγελματικός χώρος(18°C) </li>

    </div>

    <div class="vc_col-sm-4">
        <label class="control-label">Ύψος κτιρίου</label>
        <div class="input-group">
            <input type="number" placeholder="Εισάγετε ύψος π.χ. 2.3" name="roomsheight" class="form-control" id="roomsheight" value="2.5">
            <span class="input-group-addon">m</span> 
        </div>
<label class="control-label">Ζεστό νερό χρόνος</label>
           <li> <input type="radio"  name="selectedwater" value="0.00" checked> none </li>
           <li> <input type="radio"  name="selectedwater" value="3.000"> < 200 l </li>
           <li> <input type="radio"  name="selectedwater" value="6.000"> > 200 l </li>
     </div>

<div class="vc_col-sm-4">
        <label class="control-label">Μόνωση</label>
        <div class="input-group">
                <select id="thermalinsulation" placeholder="Εισάγετε τετραγωνικά" class="form-control" name="thermalinsulation">
                        <option value="1.20">None</option>
                        <option value="1.00">5cm</option>
                        <option value="0.80">10cm</option>
                        <option value="0.70">15cm</option>
                   </select>
        </div>
<label class="control-label">Ελάχιστη εξωτερική θερμοκρασία περιοχής</label>
           <li> <input type="radio"  value="1.00" name="selectedTemp" checked>  0°C - 5°C  </li>
           <li> <input type="radio"  value="1.20" name="selectedTemp"> -5°C - 10°C </li>
           <li> <input type="radio"  value="1.30" name="selectedTemp"> -10°C - 20°C </li>
   </div>
</div>


<div class="vc_column-inner">
            <div class="wpb_wrapper">
   <div class="vc_col-sm-12">
     <a class="calc-btn" href="#" id="calculateBoiler">SELECT BOILER</a>
   </div>

</div>
</div>

<div class="vc_column-inner">
            <div class="wpb_wrapper">
   <div class="vc_col-sm-12">
    <div id="result">
         <p></p>
      </div>
</div>
</div>
</div>

</form>

<script type="text/javascript">
    jQuery(document).ready(function(){

    jQuery('#calculateBoiler').click(function() {

        // Get Rooms Area Value

        function getRoomsArea () {
            var roomsArea = jQuery("#roomsarea").val()
            var roomsAreaNew = parseInt(roomsArea).toFixed(1);
            console.log(roomsAreaNew);
            return roomsAreaNew;
        }

        // Get RoomsHeight Value

        function getRoomsHeight () {
            var roomsHeight = jQuery("#roomsheight").val();
            var roomsHeightNew = parseInt(roomsHeight).toFixed(1);
            console.log(roomsHeightNew);
            return roomsHeightNew;
        }


        // Get Typos Ktitiou Value 

         function getBuildingType() {
             var buildtypeVal =  jQuery('input[name=selectedbuilding]:checked').val();
             console.log(buildtypeVal);
             return buildtypeVal;
        }

       // Get Zesto Nero Value

         function getHotWater() {
             var hotWaterVal =  jQuery('input[name=selectedwater]:checked').val();
             console.log(hotWaterVal);
             return hotWaterVal;
        }

         // Get Elaxisti Thermokrasia Perioxis

          function tempLocation() {
             var tempVal =  jQuery('input[name=selectedTemp]:checked').val();
            console.log(tempVal);
             return tempVal;
       }

        // Get Monwsh Ktiriou Value

        function getThermalInsulation() {
             var monwsh = (jQuery('#thermalinsulation :selected').val());
             console.log(monwsh);
             return monwsh;
        }

          var totalValue = (getRoomsArea () * getRoomsHeight () * 50) * (getThermalInsulation() * getBuildingType() * tempLocation()) + getHotWater();
           var result = (Math.round(totalValue / 100)).toFixed(2);

           result /= 100;
            console.log(result);


          // Calculations 


           switch (true) {

            case (totalValue == 0 || isNaN(totalValue)):
                     jQuery('#result').show();
                     jQuery('#result').html('<p style="color: red; text-align: center;">Οι τιμές δεν μπορεί να είναι κενές ή 0. Ξαναπροσπαθήστε!</p>');
             break;

             case (result <= 29000):
                      jQuery('#result').show();
                      jQuery('#result').html( '<h4> <span style="color: #fff; font-size: 16px; display: block; margin-bottom: 10px;">Σύμφωνα με τα δεδομένα που καταχωρήσατε προτεινόμενος λέβητας είναι  </span>  KPP20 ή PB26 </h4>' );
                      jQuery('#result').append('<img class="boiler-result" src="/wp-content/uploads/2019/06/revo-line-min-1.png">');
                      jQuery('#result').append('<a class="nectar-button large regular result-btn" href="/revo-line"> Περισσότερα </a> ');   
             break;

             case (result > 29000 && result <= 35000):
                      jQuery('#result').show();
                      jQuery('#result').html( '<h4> <span style="color: #fff; font-size: 16px; display: block; margin-bottom: 10px;">Σύμφωνα με τα δεδομένα που καταχωρήσατε προτεινόμενος λέβητας είναι  </span>  KPP25 ή PB35 </h4>' );
                      jQuery('#result').append('<img class="boiler-result" src="/wp-content/uploads/2019/06/revo-line-min-1.png">');
                      jQuery('#result').append('<a class="nectar-button large regular result-btn" href="/revo-line"> Περισσότερα </a> ');   
             break;
             case (result > 35000 && result <= 40000):
                      jQuery('#result').show();
                      jQuery('#result').html( '<h4> <span style="color: #fff; font-size: 16px; display: block; margin-bottom: 10px;">Σύμφωνα με τα δεδομένα που καταχωρήσατε προτεινόμενος λέβητας είναι  </span>  KPP34 ή PB35 </h4>' );
                      jQuery('#result').append('<img class="boiler-result" src="/wp-content/uploads/2019/06/revo-line-min-1.png">');
                      jQuery('#result').append('<a class="nectar-button large regular result-btn" href="/revo-line"> Περισσότερα </a> ');   
             break;
             case (result > 40000 && result <= 45000):
                      jQuery('#result').show();
                      jQuery('#result').html( '<h4> <span style="color: #fff; font-size: 16px; display: block; margin-bottom: 10px;">Σύμφωνα με τα δεδομένα που καταχωρήσατε προτεινόμενος λέβητας είναι  </span>  KPP34 ή PB44 </h4>' );
                      jQuery('#result').append('<img class="boiler-result" src="/wp-content/uploads/2019/06/revo-line-min-1.png">');
                      jQuery('#result').append('<a class="nectar-button large regular result-btn" href="/revo-line"> Περισσότερα </a> ');   
             break;
             case (result > 45000 && result <= 75000):
                      jQuery('#result').show();
                      jQuery('#result').html( '<h4> <span style="color: #fff; font-size: 16px; display: block; margin-bottom: 10px;">Σύμφωνα με τα δεδομένα που καταχωρήσατε προτεινόμενος λέβητας είναι  </span>  KPP62 ή PB70 </h4>' );
                      jQuery('#result').append('<img class="boiler-result" src="/wp-content/uploads/2019/06/revo-line-min-1.png">');
                      jQuery('#result').append('<a class="nectar-button large regular result-btn" href="/revo-line"> Περισσότερα </a> ');   
             break;
             case (result > 75000 && result <= 100000):
                      jQuery('#result').show();
                      jQuery('#result').html( '<h4> <span style="color: #fff; font-size: 16px; display: block; margin-bottom: 10px;">Σύμφωνα με τα δεδομένα που καταχωρήσατε προτεινόμενος λέβητας είναι  </span> PB90 </h4>' );
                      jQuery('#result').append('<img class="boiler-result" src="/wp-content/uploads/2019/06/revo-line-min-1.png">');
                      jQuery('#result').append('<a class="nectar-button large regular result-btn" href="/revo-line"> Περισσότερα </a> ');   
             break;

             default:
                     jQuery('#result').show();
                     jQuery('#result').html('<p style="color: red; text-align: center;">BOOOOO!</p>');
              break;     
           }










    });

});
</script>
</body>
</html>

在开关中,您必须设置为真

....

   switch(true)

测试一下上面的代码是否正常。...:)

答案 1 :(得分:0)

让我们看这里:

function getRoomsHeight () {
     var roomsHeight = jQuery("#roomsheight").val();
     var roomsHeightNew = parseInt(roomsHeight).toFixed(1);
     console.log(roomsHeightNew);
     return roomsHeightNew;
}

parseInt(roomsHeight).toFixed(1);返回一个字符串-toFixed()始终返回一个字符串,因为通常不存在精确的舍入数字(例如2.1)。因此,函数getRoomsHeight()也返回一个字符串。

getRoomsArea()相同。

您以后使用:

 var totalValue = (getRoomsArea () * getRoomsHeight () * 50) * ...

结果无效,因为您不能将2个字符串相乘。

解决方案

.toFixed()移到想要的数字上。