使用JavaScript对结果进行计数

Question

我有以下问题:我有一个供用户使用的表，在每一行的末尾给出一个结果。我想要计算我有多少个结果，只是为了计数，我不想把结果相加。我如何使用Javascript来做这件事？谢谢

我的表编码：

<table id="example" class="striped">
                                <thead>
                                <tr>
                                    <th>Objetivos</th>
                                    <th> <center>Data Inicial </center></th>
                                    <th> <center>Data Final </center></th>
                                    <th>Avaliação Inicial</th>
                                    <th>  <center>Meta </center></th>
                                    <th>Avaliação Intercalar</th>
                                    <th>Avaliação Final</th>
                                    <th>Resultado (%)</th>
                                </tr>
                                </thead>

                                <tbody>
                                 <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" name="ResultadoUni" />
                                            <label for="resultadouni" onchange="calculaMediaFinal()"></label>  
                                        </div>
                                    </th>
                                </tr>
                                <tr>
                                    <th>Objetivo 2</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="avInicial2" type="text" class="validate"
                                                   autocomplete="off" name="AvInicial"
                                                   onchange="calculaResultado(2)">
                                            <label for="avinicial"></label>
                                        </div>
                                    </th>
                                    <th>
                                        <div class="input-field col s12">
                                            <input id="meta2" type="text" class="validate" autocomplete="off"
                                                   name="Meta" onchange="calculaResultado(2)">
                                            <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="avFinal2" type="text" class="validate"
                                                   autocomplete="off" name="Avfinal" onchange="calculaResultado(2)">
                                            <label for="avfinal"></label> 
                                        </div>
                                    </th>
                                    <th>
                                        <div class="input-field col s12">
                                            <input disabled id="resultado2" name="ResultadoUni" />
                                            <label for="resultadouni" onchange="calculaMediaFinal()"></label>  
                                        </div>
                                    </th>
                                </tr>
                             </tbody>
                            </table>

我有这两行，结果是计算值。但是用户可能没有填写这两行，因此我想计算一下显示了多少个结果

enter image description here

Answer 1

您的JS代码将帮助解决此问题。我的方法是：

第1步:将id="AvIntercalar“更改为id="AvIntercalar1”和object2

function calculaResultado(id){

  //just do your maths here(I cannot understand your language)

    var initialAverage =document.getElementById('avInicial'+id).value;

    var meta =document.getElementById('meta'+id).value;
    var intercalarAverage =document.getElementById('AvIntercalar'+id).value; 
    var averageFinal =document.getElementById('avFinal'+id).value;

  var resultado=Number(initialAverage)+Number(meta)+Number(averageFinal);
//set the value as required
  document.getElementById("resultado"+id).value=resultado;


}

开始代码段

​

// grobal value validObjects 
var validObjects = [];

function calculaResultado(id) {

  //just do your maths here(I cannot understand your language)

  var initialAverage = document.getElementById('avInicial' + id).value;

  var meta = document.getElementById('meta' + id).value;
  var intercalarAverage = document.getElementById('AvIntercalar' + id).value;
  var averageFinal = document.getElementById('avFinal' + id).value;

  var resultado = Number(initialAverage) + Number(meta) + Number(averageFinal)+Number(intercalarAverage);
  //set the value as required
  document.getElementById("resultado" + id).value = resultado;

  // this code will run when resultado is valid, else no reaction
  if (resultado && validObjects.indexOf(id) == -1) {

    validObjects.push(id);

    document.getElementById('count').innerText = "Valid Results: " + validObjects.length;

  } else {
    validObjects.splice(validObjects.indexOf(id), 1);
    document.getElementById('count').innerText = "Valid Results: " + validObjects.length;
  }

}

<h2 id="count"></h2>
<table id="example" class="striped">
  <thead>
    <tr>
      <th>Objetivos</th>
      <th>
        <center>Data Inicial </center>
      </th>
      <th>
        <center>Data Final </center>
      </th>
      <th>Avaliação Inicial</th>
      <th>
        <center>Meta </center>
      </th>
      <th>Avaliação Intercalar</th>
      <th>Avaliação Final</th>
      <th>Resultado (%)</th>
    </tr>
  </thead>

  <tbody>
    <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="AvIntercalar1" 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" name="ResultadoUni" />
          <label for="resultadouni" onchange="calculaMediaFinal()"></label>
        </div>
      </th>
    </tr>
    <tr>
      <th>Objetivo 2</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="avInicial2" type="text" class="validate" autocomplete="off" name="AvInicial" onchange="calculaResultado(2)">
          <label for="avinicial"></label>
        </div>
      </th>
      <th>
        <div class="input-field col s12">
          <input id="meta2" type="text" class="validate" autocomplete="off" name="Meta" onchange="calculaResultado(2)">
          <label for="meta"></label>
        </div>
      </th>
      <th>
        <div class="input-field col s12">
          <input id="AvIntercalar2" type="text" class="validate" autocomplete="off" name="AvIntercalar">
          <label for="avintercalar"></label>
        </div>
      </th>
      <th>
        <div class="input-field col s12">
          <input id="avFinal2" type="text" class="validate" autocomplete="off" name="Avfinal" onchange="calculaResultado(2)">
          <label for="avfinal"></label>
        </div>
      </th>
      <th>
        <div class="input-field col s12">
          <input disabled id="resultado2" name="ResultadoUni" />
          <label for="resultadouni" onchange="calculaMediaFinal()"></label>
        </div>
      </th>
    </tr>
  </tbody>
</table>

​