I need help with the result for a form in JavaScript

I’m learning programming, first of all, I ask you to help me if I’m making a critical mistake.

I’m trying to develop/practice a calculator, where in the last input field the result is displayed.
I have the formula used on a website, but I’m having trouble replicating the references.
The JavaScript code taken from the site is:

;(function( $, window, document, undefined ) {

    'use strict';

    setTimeout( function(){
        $( '.touchevents' ).find( '.js-taphover' ).removeClass( 'js-taphover' );
    }, 1000 );

    // Calculadora de consumo
    var calcQuantity = function( qty, type ) {
        var values, qtyFaixa;

        qty = parseInt( qty );

        if ( type == 'Ceramica / Porcelanato' ) {
            values = { 19: 1, 79: 2, 99: 3, 119: 4, 9999: 5 };
        }
        if ( type == 'Granitos / Outras Pedras' ) {
            values = { 19: 1, 49: 2, 69: 3, 90: 4, 109: 5, 9999: 6 };
        }

        $.each( values, function( index, value ) {
            if ( qty <= parseInt( index ) ) {
                qtyFaixa = value;
                return false;
            }
        });

        return qtyFaixa;
    };

    $( document ).bind( 'gform_post_render', function( event, form_id, current_page ){

        if ( jQuery.inArray( form_id, [7, 8, 9] ) == -1 ) {
            return;
        }

        var selectors = {
            '7': {
                'fields': '#gform_fields_7 input[type="text"], #gform_fields_7 select',
                'revestimento': '#input_7_8',
                'aresta_menor': '#input_7_17',
                'aresta_maior': '#input_7_18',
                'area_aplicacao': '#input_7_14',
                'resultado': '#input_7_19'
            },
            '8': {
                'fields': '#gform_fields_8 input[type="text"], #gform_fields_8 select',
                'revestimento': '#input_8_8',
                'aresta_menor': '#input_8_17',
                'aresta_maior': '#input_8_18',
                'area_aplicacao': '#input_8_14',
                'resultado': '#input_8_19'
            },
            '9': {
                'fields': '#gform_fields_9 input[type="text"], #gform_fields_9 select',
                'revestimento': '#input_9_8',
                'aresta_menor': '#input_9_17',
                'aresta_maior': '#input_9_18',
                'area_aplicacao': '#input_9_14',
                'resultado': '#input_9_19'
            }
        };
        
        $( selectors[form_id].fields ).on( 'change input paste', function() {

        var revestimento = $( selectors[form_id].revestimento ).val(),
            aresta_menor = parseInt( $( selectors[form_id].aresta_menor ).val() ),
            aresta_maior = parseInt( $( selectors[form_id].aresta_maior ).val() ),
            area_aplicacao = parseInt( $( selectors[form_id].area_aplicacao ).val() ),
            $resultado = $( selectors[form_id].resultado ),
            result, 
            C4, C5, D4, D5, D6, D7, D8; // excel cell

            C4 = aresta_menor;
            C5 = aresta_maior;
            D4 = calcQuantity( aresta_menor, revestimento );
            D5 = calcQuantity( aresta_maior, revestimento );
            D6 = Math.sqrt( area_aplicacao );
            D7 = ( D6 / ( C4 / 100 ) );
            D8 = ( D6 / ( C5 / 100 ) );

            result = ((D7*D4)*(D8-1))+(D8*D5)*(D7-1);
            if ( ! isNaN( result ) ) {
                $resultado.val( Math.ceil( result ) + ' peças' );
            } else {
                $resultado.val( '' );
            }
        });
    });

}( jQuery, window, document ));

My HTML page with the form fields is:

<ion-header [translucent]="true">

</ion-header> <!-- Top da página (menu) -->

<ion-content [fullscreen]="true">

  <ion-header collapse="condense">

    <script type="tab1.page.ts"></script> <!-- Script JS -->
    
    <ion-toolbar>
      <ion-title size="large">Calculadora</ion-title>
    </ion-toolbar>
  </ion-header>


      <div class="ion-padding">

          <h1>
            Cálculo de Consumo
          </h1>

          <p>
            Faça o cálculo da quantidade de clipes necessária para sua obra
          </p>

            <ion-item color="none">
              <ion-label position="floating">
                Revestimento
              </ion-label>
                <ion-select type="text">
                  <ion-select-option class="Ceramica / Porcelanato">Cerâmica / Porcelanato</ion-select-option>
                  <ion-select-option class="Marmores / Granitos">Mármores / Granitos</ion-select-option>
                </ion-select>
            </ion-item> 

              <br>

            <ion-item  color="none">
              <ion-label position="floating">
                Lado X (cm)
              </ion-label>
              <ion-input type="number"></ion-input>
            </ion-item> 

              <br>

            <ion-item  color="none">
              <ion-label position="floating">
                Lado Y (cm)
              </ion-label>
              <ion-input type="number"></ion-input>
            </ion-item> 

              <br>

            <ion-item  color="none">
              <ion-label position="floating">
                Parede Maior (m)
              </ion-label>
              <ion-input type="number"></ion-input>
            </ion-item> 

              <br>

            <ion-item  color="none">
              <ion-label position="stacked">
                {{ resultado }}
              </ion-label>
              <ion-input type="text"> </ion-input>
            </ion-item> 

          <h5>
            Observação: Como as cunhas são reutilizáveis, sugerimos a quantidade de 300 a 400 peças por instalador.
          </h5>

      </div>

</ion-content>

thank you in advance for the help

1 post - 1 participant

Read full topic