Does not return PHP result

Question

I have the following problem, I am trying to make a table where in the place of the result returns a value but at the moment nothing appears. I’d really appreciate your help

<tr>
    <th>Objetivo 1</th>
    <th>
        <div class="input-field col s12">
            <input id="DataInicio" type = "date" class = "datepicker" name = "DataInicio" />
            <label for="datainicio"></label>
        </div>
    </th>
    <th>
        <div class="input-field col s12">
            <input id="DataFim" type = "date" class = "datepicker" name = "DataFim" />
            <label for="datafim"></label>
        </div>
    </th>
    <th>
        <div class="input-field col s12">
            <input id="avInicial1" type="text" class="validate"
                   autocomplete="off" name="AvInicial"
                   onchange="calculaResultado(1)">
             <label for="avinicial"></label>
        </div>
    </th>
    <th>
        <div class="input-field col s12">
            <input id="meta1" type="text" class="validate" autocomplete="off"
                   name="Meta" onchange="calculaResultado(1)">
            <label for="meta"></label>
        </div>
    </th>
    <th>
        <div class="input-field col s12">
            <input id="AvIntercalar" type="text" class="validate"
                   autocomplete="off" name="AvIntercalar">
            <label for="avintercalar"></label>
        </div>
    </th>
    <th>
        <div class="input-field col s12">
            <input id="avFinal1" type="text" class="validate"
                   autocomplete="off" name="Avfinal" onchange="calculaResultado(1)">
            <label for="avfinal"></label>       
        </div>
    </th>
    <th>
        <div class="input-field col s12">
            <input disabled id="resultado1"/>
        </div>
    </th>
</tr>

<script>

(function calculaResultado(x){

    console.log(x);
    a = document.getElementById('avInicial' + x).value;
    b = document.getElementById('meta' + x).value;
    c = document.getElementById('avFinal' + x).value;

    const resultado = ((c*100)/b);

      if(b === c){
        return 1; //100%
      } else if (a > c) {
        return 0; // 0%
      } else {
        return resultado;
      }

    document.getElementById('resultado' + x).value =  parseInt(resultado); 
})();

When I run and enter the values nothing happens in the result column.

Answer 1

As it stands, I believe you’re calling the function incorrectly, and you’re doing the return of the result before allocation in the field, ie would never perform the assignment in the field outworking. Check below if this is what you need:

function calculaResultado(x){
    a = document.getElementById('avInicial' + x).value;
    b = document.getElementById('meta' + x).value;
    c = document.getElementById('avFinal' + x).value;
    
    const resultado = ((c*100)/b);    

      if(b === c){
        document.getElementById('resultado' + x).value = 1; 
        return 1; //100%
      } else if (a > c) {
        document.getElementById('resultado' + x).value = 0; 
        return 0; // 0%
      } else {
        document.getElementById('resultado' + x).value = resultado; 
        return resultado;
      }
};

<tr>
    <th>Objetivo 1</th>
    <th>
        <div class="input-field col s12">
            <input id="DataInicio" type = "date" class = "datepicker" name = "DataInicio" />
            <label for="datainicio"></label>
        </div>
    </th>
    <th>
        <div class="input-field col s12">
            <input id="DataFim" type = "date" class = "datepicker" name = "DataFim" />
            <label for="datafim"></label>
        </div>
    </th>
    <th>
        <div class="input-field col s12">
            <input id="avInicial1" type="text" class="validate"
                   autocomplete="off" name="AvInicial"
                   onchange="calculaResultado(1)">
             <label for="avinicial"></label>
        </div>
    </th>
    <th>
        <div class="input-field col s12">
            <input id="meta1" type="text" class="validate" autocomplete="off"
                   name="Meta" onchange="calculaResultado(1)">
            <label for="meta"></label>
        </div>
    </th>
    <th>
        <div class="input-field col s12">
            <input id="AvIntercalar" type="text" class="validate"
                   autocomplete="off" name="AvIntercalar">
            <label for="avintercalar"></label>
        </div>
    </th>
    <th>
        <div class="input-field col s12">
            <input id="avFinal1" type="text" class="validate"
                   autocomplete="off" name="Avfinal" onchange="calculaResultado(1)">
            <label for="avfinal"></label>       
        </div>
    </th>
    <th>
        <div class="input-field col s12">
            <input disabled id="resultado1"/>
        </div>
    </th>
</tr>

Answer 2

I made some changes:

• Do not invoke the function from the start (function() {})() because there are no values passed yet. So invoke the function in onchange

function calculaResultado(x){

   //console.log(x);
   a = document.getElementById('avInicial' + x).value;
   b = document.getElementById('meta' + x).value;
   c = document.getElementById('avFinal' + x).value;

    const resultado = ((c*100)/b);


      if(b === c){
        result = 1; //100%
      } else if (a > c) {
        result = 0; // 0%
      } else {
        result = parseInt(resultado);
      }
      document.getElementById('resultado' + x).value = result;  
};

<table><tr>
    <th>Objetivo 1</th>
    <th>
        <div class="input-field col s12">
            <input id="DataInicio" type = "date" class = "datepicker" name = "DataInicio" />
            <label for="datainicio"></label>
        </div>
    </th>
    <th>
        <div class="input-field col s12">
            <input id="DataFim" type = "date" class = "datepicker" name = "DataFim" />
            <label for="datafim"></label>
        </div>
    </th>
    <th>
        <div class="input-field col s12">
            <input id="avInicial1" type="text" class="validate"
                   autocomplete="off" name="AvInicial"
                   onchange="calculaResultado(1)">
             <label for="avinicial"></label>
        </div>
    </th>
    <th>
        <div class="input-field col s12">
            <input id="meta1" type="text" class="validate" autocomplete="off"
                   name="Meta" onchange="calculaResultado(1)">
            <label for="meta"></label>
        </div>
    </th>
    <th>
        <div class="input-field col s12">
            <input id="AvIntercalar" type="text" class="validate"
                   autocomplete="off" name="AvIntercalar">
            <label for="avintercalar"></label>
        </div>
    </th>
    <th>
        <div class="input-field col s12">
            <input id="avFinal1" type="text" class="validate"
                   autocomplete="off" name="Avfinal" onchange="calculaResultado(1)">
            <label for="avfinal"></label>       
        </div>
    </th>
    <th>
        <div class="input-field col s12">
            <input disabled id="resultado1"/>
        </div>
    </th>
</tr></table>