Fix Function in Calculator

3

AsIdonothavemuchknowledgeofjavascriptIneedalittlehelpfromyou.

ThisscriptisasimplecalculatorbutIcannotmakesomefunctionswork.Ijustneedit

  • WhenchoosingaRadioFielditshowsthevalueofthefield
  • Andthenimmediatelymultiplythedropdwonnbagsxvalueofthechosenradiofieldandaddtothefinalcalculation

Belowisthescriptthatworks,ifpossibleIneedasolutionthatmovesaslittleaspossibleinthecode

$(document).ready(function() {
  $(".valores1").change(function() {
    var total = 50;
    total += $('input[class="valores1"]:checked').get().reduce(function(tot, el) {
      return tot + Number(el.value);
    }, 0);
        
    var f = document.getElementById("valores7");    
    var itemSelecionadof = f.value;
         
    var e = document.getElementById("valores2");
    var itemSelecionado = e.options[e.selectedIndex].value;
    var primeiroDigito = (itemSelecionado.substring(0,1));
    total=total+(primeiroDigito*100);
    ///////////////////////////////////////////////////////////////
    var d = document.getElementById("valores3");
    var itemSelecionado3 = d.options[d.selectedIndex].value;
    var primeiroDigito3 = (itemSelecionado3.substring(0,1));
    total=total+(primeiroDigito3*itemSelecionadof);
    //////////////////////////////////////////////////////////////
    var g = document.getElementById("valores4");
    var itemSelecionado4 = g.options[g.selectedIndex].value;
    
    if (g.value == 1) {
     d.value = 0;
     g.value = 0;
     f.value = 0
     total = total-(primeiroDigito3*100);
     $('#total1').val(total);
     }
    //////////////////////////////////////////////////////////////
    
    
    
    //aqui pega primeiro digito
    
    $('#total1').val(total.toFixed(2));     
  });  
});
<form>
PERA:<input type="checkbox" class="valores1"  name="direcao" value="10" id="option_1"  />
Banana:<input type="checkbox" class="valores1" name="bilingue" value="15" id="option_1"  /><br />

<select id="valores2"   class="valores1 form-control" name="tipo carnes" >
    <option value="0">Carnes</option>
    <option value="1">1 Picanha</option>
    <option value="2">2 Picanhas</option>
    <option value="3">3 Picanhas</option>
    
</select>  <br /><br />

Sacola Pequena<input type="radio" class="valores1" name="normal" value="100" id="valores7" />
Sacola Grande<input type="radio" class="valores1" name="normal"    value="150" id="valores7"/>
&nbsp;&nbsp;====>Mostrar Valor da sacola<input type="text" size="5"  readonly="" id="valorsacola" name="valor da sacola"  value="0.00" style="background-color: transparent; border-color: transparent; font-weight: bold; font-size: 18px; color: green; "    />            
<br />
<select id="valores3"   class="valores1 form-control" name="nsacolas" >
    <option value="0">N de Sacola</option>
    <option value="1">x1</option>
    <option value="2">x2</option>
    <option value="3">x3</option>
    
</select>  
<br /><hr />

Zerar Calculo da Sacola
<select id="valores4"   class="valores1 form-control" name="cadeirinha2" >
    <option value="0"></option>
    <option value="1">zerar</option>
    <option value="2">x2</option>    
</select>  
<br /><br /><br />

Consuma&ccedil;&atilde;o Minima
<input type="text" size="5"  readonly="" name="valor" id="total1" value="50.00" style="background-color: transparent; border-color: transparent; font-weight: bold; font-size: 18px; color: green; "    />            
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
asked by anonymous 29.12.2017 / 15:07

2 answers

1

Place an event handler on the $(".valores1").change(function function to detect when a radio is clicked. I put evt , like this:

                                ↓
$(".valores1").change(function(evt) {

I changed the code to make it simpler using jQuery:

$(document).ready(function() {
  $(".valores1").change(function(evt) {
     
   var total = 50;
   var frutas_val = 0;
   var sacolas = 0;

   if(evt.target.id == "valores4"){
      if($(this).val() == 1){
         $('#valores3, #valores4').prop('selectedIndex',0);
         $('form input[type="radio"]').prop('checked', false);
         $('#valorsacola').val('0.00');
      }else if($(this).val() == 2){
         alert("x2");
      }
   }
     
   //pego valor das frutas
   var frutas = $('form input[type="checkbox"]:checked');
   for( var x =0; x < frutas.length; x++ ){
      frutas_val += parseInt($(frutas[x]).val());
   }
   !isNaN(frutas_val) ? frutas_val : 0;
   
   //pego qtd de carnes
   var carnes = $('#valores2').val();
   carnes = carnes != 0 ? carnes*100 : 0;
   
   // valor das sacolas
   if(evt.target.type == "radio"){
     $('#valorsacola').val(parseFloat($(this).val()).toFixed(2));
   }

   var radio = $('form input.valores1[type="radio"]:checked').val();
   var vradio = parseFloat(radio);
   if(!isNaN(vradio)){
      var sacolas_qtd = $('#valores3').val();
      // multiplico o valor da sacola pelo número de sacolas escolhidas
      sacolas = vradio * sacolas_qtd;
   }

   total += frutas_val+carnes+sacolas;

   total = total <= 50 ? 50+frutas_val : total;
   $('#total1').val(total.toFixed(2));
     
  });  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form>PERA:<inputtype="checkbox" class="valores1"  name="direcao" value="10" id="option_1"  />
Banana:<input type="checkbox" class="valores1" name="bilingue" value="15" id="option_1"  /><br />

<select id="valores2" class="valores1 form-control" name="tipo carnes" >
    <option value="0">Carnes</option>
    <option value="1">1 Picanha</option>
    <option value="2">2 Picanhas</option>
    <option value="3">3 Picanhas</option>
    
</select>  <br /><br />

Sacola Pequena<input type="radio" class="valores1" name="normal" value="100" id="valores7" />
Sacola Grande<input type="radio" class="valores1" name="normal"    value="150" id="valores7"/>
&nbsp;&nbsp;====>Mostrar Valor da sacola<input type="text" size="5"  readonly="" id="valorsacola" name="valor da sacola"  value="0.00" style="background-color: transparent; border-color: transparent; font-weight: bold; font-size: 18px; color: green; "    />            
<br />
<select id="valores3"   class="valores1 form-control" name="nsacolas" >
    <option value="0">N de Sacola</option>
    <option value="1">x1</option>
    <option value="2">x2</option>
    <option value="3">x3</option>
    
</select>  
<br /><hr />

Zerar Calculo da Sacola
<select id="valores4" class="valores1 form-control" name="cadeirinha2" >
    <option value="0"></option>
    <option value="1">zerar</option>
    <option value="2">x2</option>    
</select>  
<br /><br /><br />

Consuma&ccedil;&atilde;o Minima
<input type="text" size="5"  readonly="" name="valor" id="total1" value="50.00" style="background-color: transparent; border-color: transparent; font-weight: bold; font-size: 18px; color: green; "    />            
</form>
    
29.12.2017 / 20:18
0

When choosing a field Radio it shows the value of this field

Just put the following line in the function below:

$(".valores1").change(function() {
        $('#valorsacola').val($('input[class="valores1"]:checked').val());
});

So you get the value (value attribute of the input element) of the selected radio button and set that value to the value of the field with id #valorsacola .

  

And then immediately multiply the dropdwon n bags x value of the chosen radio field and add to the final calculation

This part, the description is conflicting with what the code actually does. Apparently there is already this multiplication.

    
29.12.2017 / 18:28