Display Array data in the Jquery table

1

I'm developing an application which calculates the average where I validate the fields if they are filled out and if the fields are filled and the sum of the notes is less than 10 it passes the inputText data to the calculating function of the media and another function that returns the status of the student if it is approved, failed. So I save the data typed in arrays and presenting it on a table

But when you click the calculate button it displays this message.

HTML

<body><formaction="" method="post" class="formcss" name="form1"  >
    <h1>Dados do Aluno<br/>
        <span class="titulo">Por favor, preencha os campos solicitados.</span>
    </h1> 
    <div>&nbsp;</div> 
    <div>
        <div class="rotulos">RGM :</div>
        <input id="rgm" type="text" name="rgm" placeholder="Digite seu RGM" class="entrada" />
    </div>
    <div>
    <div>
        <div class="rotulos">Nome :</div>
        <input id="nome" type="text" name="nome" placeholder="Nome completo" class="entrada" />
    </div>

    <div>
        <div class="rotulos">Nota parcial :</div>
        <input type="text" id="notaparcial" name="notaparcial" 
               placeholder="Digite aqui a nota parcial" class="entrada" />
    </div>
    <div>
        <div class="rotulos">Nota exercícios :</div>
        <input type="text" id="notaexercicios" name="notaexercicios" 
               placeholder="Digite aqui a nota dos exercícios" class="entrada" />
    </div>
    <div>
        <div class="rotulos">Nota projeto :</div>
        <input type="text" id="notaprojeto" name="notaprojeto" 
               placeholder="Digite aqui a nota no projeto" class="entrada" />
    </div>
    <div>
        <div class="rotulos">Nota regimental :</div>
        <input type="text" id="notaregimental" name="notaregimental" 
               placeholder="Digite aqui a nota regimental" class="entrada" />
    </div>
    <div>
        <div class="rotulos">&nbsp;</div>
        <input type="button" id="btncalcular" value="Calcular" class="botao" />
        <input type="button" id="btnlistar" value="Mostrar" class="botao" />
    </div>
    <div>
        <div id="divresultado" class="rotuloretorno">Resultado...</div>
    </div>
    <div>&nbsp;</div><br>
</form>

</body>

CSS

<style type="text/css">
.formcss {
width: 55%;
background-color: #865027;
padding: 20px 30px 20px 30px;
font-size: 12px;
font-family: verdana;
color: #fff;
text-shadow: 2px 2px 2px #000;
border-radius: 25px;
margin: 0 auto;
}
h1 {
padding: 0px 0px 10px 0px;
border-bottom: 3px solid #000;
text-align: center;
}
.titulo {    
font-size: 11px;
}
div {    
   margin: 0px 0px 20px;
}
.rotulos {
float: left;
width: 20%;
text-align: right;
padding-right: 10px;
margin-top: 10px;
font-weight: bold;
 }
.rotuloretorno {
float: left;
width: 75%;
font-size: 14px;
font-family: verdana;
text-align: left;
padding-left: 200px;
padding-right: 10px;
margin-top: 10px;
font-weight: bold;
}
  .entrada {
border: none;
color: #525252;
height: 30px;
line-height: 15px;    
padding: 5px 0px 5px 5px;
width: 70%;
border-radius: 5px;
box-shadow: 2px 2px 2px #000;
background-color: #f5deb3;
}
   .botao {
background-color: #2e1707;
border: none;
padding: 10px 25px 10px 25px;
color: #fff;
border-radius: 4px;
text-shadow: 1px 1px 1px #FFE477;
font-weight: bold;
box-shadow: 2px 2px 2px #3D3D3D;
}
   .botao:hover {
color: #dbd9d9;
background-color: #030201;
}    
</style>

Functions and Jquery

<script>

function validar() {
var nome= $("#nome").val();
var rgm= $("#rgm").val();
var parcial= $("#notaparcial").val();
var exercicios= $("#notaexercicios").val();
var projeto= $("#notaprojeto").val();
var regimental= $("#notaregimental").val();

if(nome == ""){

    alert('Preencha o campo com seu nome');
    form1.nome.focus();
}
else if(rgm == ""){
    alert('Preencha o campo com rgm');
    form1.rgm.focus();

}

else if(parcial == ""){
    alert('Preencha o campo com a nota da parcial');
    form1.rgm.focus();

}

else if(exercicios == ""){
    alert('Preencha o campo com a nota dos exe');
    form1.exercicios.focus();

}

else if(projeto == ""){
alert('Preencha o campo com a nota projeto');
    form1.projeto.focus();

}

else{
    alert('Preencha o campo com a nota regimental');
    form1.notaregimental.focus();

     }
  }

function caculoMedia(n1,n2,n3,n4){
        var media;

    media=(n1+n2+n3+n4)/4;

        return media;
    }

function situacao(n1,n2,n3,n4){
        var situacao="",media;

    media=(n1+n2+n3+n4)/4;

    if(media>=6){
        situacao+="Aprovado";


    }
    else if(media<6){

        situacao+="Exame";
    }
    else{

        situacao+="Reprovado";
    }

        returnsituacao;
    }


var nomes=[];
var indice=[];
  var situacao=[];
  var media=[];

    var i=1;


 window.onload = function(){
    var btn = document.getElementById("btncalcular");
    btn.onclick = function (){
        if(validar){
            if(parcial+exercicios+projeto+regimental<=10){
         nomes[i]=$("#nome").val();
        var parcial= $("#notaparcial").val();
var exercicios= $("#notaexercicios").val();
var projeto= $("#notaprojeto").val();
var regimental= $("#notaregimental").val();

              var resp=caculoMedia(parcial,exercicios,projeto,regimental);
       media[i]=resp;   
                  var situacao=situacao(parcial,exercicios,projeto,regimental);
       situacao[i]=situacao;    

        }
            else{

                alert("A soma das notas não podem ultrapassar 10");
            }


        }
    }

    document.getElementById("btnlistar").onclick=function(){
            listarAlunos();
        }
}



function listarAlunos(){
    var conteudo="<table border='2'>";
     conteudo+="<tr>";
     conteudo+="<th>";
    conteudo+="<div class='aluno'><p>Aluno</p></div>";
      conteudo+="</th>";
    conteudo+="<th>";
    conteudo+="<div class='media'><p>Media</p></div>";
      conteudo+="</th>";
    conteudo+="<th>";
    conteudo+="<div class='situacao'><p>Situacao</p></div>";
      conteudo+="</th>";
     conteudo+="</tr>";
    //pos contator
    for(var pos=0;pos<nomes.length;pos++){
        conteudo+="<tr>";

        conteudo+="<td>"+nomes[pos]+"</td>";
        conteudo+="<td>"+media[pos]+"</td>";
        conteudo+="<td>"+situacao[pos]+"</td>";

        conteudo+="</tr>";
    }
    conteudo+="</table>";
    document.getElementById("txtrelatorio").innerHTML=conteudo;
}
</script>    
    
asked by anonymous 04.11.2017 / 23:30

1 answer

1

You have several problems in the code:

  • Situation is defined twice. One as a function, another as array
  • Use Number() around numbers, to convert them from text to number
  • After if (validar) { should have the numbers because you will compare them in the if next, as you were in a line below and so had not been read yet.

Suggestion:

function validar() {
  var nome = $("#nome").val();
  var rgm = $("#rgm").val();
  var parcial = Number($("#notaparcial").val());
  var exercicios = Number($("#notaexercicios").val());
  var projeto = Number($("#notaprojeto").val());
  var regimental = Number($("#notaregimental").val());

  if (nome == "") {
    alert('Preencha o campo com seu nome');
    form1.nome.focus();
  } else if (rgm == "") {
    alert('Preencha o campo com rgm');
    form1.rgm.focus();

  } else if (parcial == 0) {
    alert('Preencha o campo com a nota da parcial');
    form1.rgm.focus();

  } else if (exercicios == 0) {
    alert('Preencha o campo com a nota dos exe');
    form1.exercicios.focus();

  } else if (projeto == 0) {
    alert('Preencha o campo com a nota projeto');
    form1.projeto.focus();

  } else {
    alert('Preencha o campo com a nota regimental');
    form1.notaregimental.focus();
  }
}

function caculoMedia( /* n1, n2, n3, n4, etc */ ) {
  return [].reduce.call(arguments, function(sum, nr) {
    return sum + nr;
  }, 0) / (arguments.length);
}

function situacao(n1, n2, n3, n4) {
  var situacao = "";
  var media = caculoMedia(n1, n2, n3, n4);
  if (media >= 6) situacao += "Aprovado";
  else if (media < 6) situacao += "Exame";
  else situacao += "Reprovado";
  return situacao;
}


var nomes = [];
var indice = [];
var sit = [];
var media = [];

var i = 1;


window.onload = function() {
  var btn = document.getElementById("btncalcular");
  btn.onclick = function() {
    if (validar) {
      var parcial = Number($("#notaparcial").val());
      var exercicios = Number($("#notaexercicios").val());
      var projeto = Number($("#notaprojeto").val());
      var regimental = Number($("#notaregimental").val());
      console.log(parcial, exercicios, projeto, regimental);
      if (parcial + exercicios + projeto + regimental <= 10) {
        nomes[i] = $("#nome").val();


        var resp = caculoMedia(parcial, exercicios, projeto, regimental);
        media[i] = resp;
        var sit = situacao(parcial, exercicios, projeto, regimental);
        sit[i] = situacao;
      } else {
        alert("A soma das notas não podem ultrapassar 10");
      }
    }
  }
  document.getElementById("btnlistar").onclick = function() {
    listarAlunos();
  }
}



function listarAlunos() {
  var conteudo = "<table border='2'>";
  conteudo += "<tr>";
  conteudo += "<th>";
  conteudo += "<div class='aluno'><p>Aluno</p></div>";
  conteudo += "</th>";
  conteudo += "<th>";
  conteudo += "<div class='media'><p>Media</p></div>";
  conteudo += "</th>";
  conteudo += "<th>";
  conteudo += "<div class='situacao'><p>Situacao</p></div>";
  conteudo += "</th>";
  conteudo += "</tr>";
  //pos contator
  for (var pos = 0; pos < nomes.length; pos++) {
    conteudo += "<tr>";

    conteudo += "<td>" + nomes[pos] + "</td>";
    conteudo += "<td>" + media[pos] + "</td>";
    conteudo += "<td>" + sit[pos] + "</td>";

    conteudo += "</tr>";
  }
  conteudo += "</table>";
  document.getElementById("txtrelatorio").innerHTML = conteudo;
}
.formcss {
  width: 55%;
  background-color: #865027;
  padding: 20px 30px 20px 30px;
  font-size: 12px;
  font-family: verdana;
  color: #fff;
  text-shadow: 2px 2px 2px #000;
  border-radius: 25px;
  margin: 0 auto;
}

h1 {
  padding: 0px 0px 10px 0px;
  border-bottom: 3px solid #000;
  text-align: center;
}

.titulo {
  font-size: 11px;
}

div {
  margin: 0px 0px 20px;
}

.rotulos {
  float: left;
  width: 20%;
  text-align: right;
  padding-right: 10px;
  margin-top: 10px;
  font-weight: bold;
}

.rotuloretorno {
  float: left;
  width: 75%;
  font-size: 14px;
  font-family: verdana;
  text-align: left;
  padding-left: 200px;
  padding-right: 10px;
  margin-top: 10px;
  font-weight: bold;
}

.entrada {
  border: none;
  color: #525252;
  height: 30px;
  line-height: 15px;
  padding: 5px 0px 5px 5px;
  width: 70%;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #000;
  background-color: #f5deb3;
}

.botao {
  background-color: #2e1707;
  border: none;
  padding: 10px 25px 10px 25px;
  color: #fff;
  border-radius: 4px;
  text-shadow: 1px 1px 1px #FFE477;
  font-weight: bold;
  box-shadow: 2px 2px 2px #3D3D3D;
}

.botao:hover {
  color: #dbd9d9;
  background-color: #030201;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formaction="" method="post" class="formcss" name="form1">
  <h1>Dados do Aluno<br/>
    <span class="titulo">Por favor, preencha os campos solicitados.</span>
  </h1>
  <div>&nbsp;</div>
  <div>
    <div class="rotulos">RGM :</div>
    <input id="rgm" type="text" name="rgm" placeholder="Digite seu RGM" class="entrada" />
  </div>
  <div>
    <div>
      <div class="rotulos">Nome :</div>
      <input id="nome" type="text" name="nome" placeholder="Nome completo" class="entrada" />
    </div>

    <div>
      <div class="rotulos">Nota parcial :</div>
      <input type="text" id="notaparcial" name="notaparcial" placeholder="Digite aqui a nota parcial" class="entrada" />
    </div>
    <div>
      <div class="rotulos">Nota exercícios :</div>
      <input type="text" id="notaexercicios" name="notaexercicios" placeholder="Digite aqui a nota dos exercícios" class="entrada" />
    </div>
    <div>
      <div class="rotulos">Nota projeto :</div>
      <input type="text" id="notaprojeto" name="notaprojeto" placeholder="Digite aqui a nota no projeto" class="entrada" />
    </div>
    <div>
      <div class="rotulos">Nota regimental :</div>
      <input type="text" id="notaregimental" name="notaregimental" placeholder="Digite aqui a nota regimental" class="entrada" />
    </div>
    <div>
      <div class="rotulos">&nbsp;</div>
      <input type="button" id="btncalcular" value="Calcular" class="botao" />
      <input type="button" id="btnlistar" value="Mostrar" class="botao" />
    </div>
    <div>
      <div id="divresultado" class="rotuloretorno">Resultado...</div>
    </div>
    <div>&nbsp;</div><br>
</form>
    
05.11.2017 / 09:17