No PHP result returned

0

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. Thank you so much for 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 values nothing happens in the result column.

    
asked by anonymous 21.05.2018 / 12:50

2 answers

0

As it is, I believe you are calling the function incorrectly, and you are doing return of the result before the assignment in the field, ie, you would never perform the assignment in the result . 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>
    
21.05.2018 / 17:20
0

I've made some changes:

  • Do not invoke the logo start function (function() {})() as 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>
    
21.05.2018 / 17:39