Enter percentage in progress bar (JAVASCRIPT)

Question

Enter percentage in progress bar (JAVASCRIPT)

Navigation

#1 by (0 votes)

0

I made a progress bar with the bootstrap. Then every time something is filled in the table a certain percentage more is inserted in the bar. The data that is inserted into the table comes from an API, so it does this automatically. I did it as follows:

function Progresso(){
  var progressTest = document.querySelector('.info-nome');

  var teste = progressTest.textContent || progressTest.innerText;

  var cont = teste.length;

  if (cont > 0) {
    var Porc = document.getElementById('progresso_Id').style.width = "5%";
  }
}

If the class that comes from api that contains the name is filled, that is, it is more than 0, it will insert 5% in the progress bar. But unfortunately it does not work the way I want it to. Another example of the rest of my code:

function Prog() {

  var progressTest = document.querySelector('.info-cpf');

  var teste = progressTest.textContent || progressTest.innerText;

  var cont = teste.length;

  if (cont > 0) {
    var Porc = document.getElementById('progresso_Id').style.width = "10%";
  }
}

That is, he is not adding + 5%, but rather 10%, so if the name is not entered and cpf is yes, it is already going to 10%

How can I insert + 5% and not change the width of the progress bar? The progress bar is by bootstrap

    <div class="container conteudo">
  <div class="row nospace">

            <div class="progress">
          <div class="progress-bar progress-bar-danger active progress-bar-striped progresso" id="progresso_Id" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:0%">
            <span class="sr-only">0%</span>
          </div>
            </div>

 </div>
</div>

And how can you do this in pure javascript? If possible, I would also like to know how I put it to show how much percent already has in the bar for the user to see

API:

    var endereco = 'http://api';

$.ajax({
    url: endereco,
    crossDomain: true,
    complete: function(res){
        var meuJSON = JSON.parse(res.responseText);

        var a = [meuJSON];

        a.forEach(function(element) {
            console.log(element);
            for (var i = 0; i < 1; i++) {
              element[i]
              var adiciona = element;

AdicionaNome(adiciona[1]);
AdicionaCPF(adiciona[1]);
AdicionaProduto(adiciona[1]);
AdicionaCidade(adiciona[1]);
AdicionaCodigoProduto(adiciona[1]);
AdicionaCodigoCliente(adiciona[1]);
AdicionaStatus(adiciona[1]);
AdicionaEntPrevista(adiciona[1]);
AdicionaEntregaProgramada(adiciona[1]);

javascript html5 css bootstrap

asked by anonymous 11.01.2018 / 13:52

1 answer

Error in code I can not find - Create CNPJ (Java) Recover Firebase data with multiple child

score 0 · Answer 1

First, it is not a good idea to leave the value to be added fixed in the Code. You can simply count the fields and divide by 100 , giving you the amount in % equivalent.

Then you can create an Array with the fields you need to count (the name of the classes you use in .info-* ) and call the function that I put in Snippet

Everything in pure JavaScript

//Campos que deseja contabilizar
var listaCampos = ["cpf", "nome", "idade", "endereco"];

//Elemento da Barra de Progresso
var barraProgresso = document.getElementById("barra");
function Progresso(){
   var total = 0;
   
   //% equivalente a cada campo
   var count = 100/(listaCampos.length);
   for(var i in listaCampos){
      var campo = listaCampos[i]; 
      
      //Verifica se campo Existe
      var campoEncontrado = document.querySelector('.info-' + campo);    
      if(campoEncontrado){ 
          //Soma Porcentagem equivalente ao Total
          total += count;
      }
   }
   
   //Seta Propriedades da Barra de Progresso
   barraProgresso.style.width = total + "%";
   barraProgresso.innerHTML = total + "%";
}


//Funções apenas para Demonstração do Código

var pessoa = { nome: "João Silva", cpf: "123.123.123-00", endereco : "Visconde de Pelotas", idade: 32 };
var resultado = document.getElementById("resultado");

function InserirCampo(prop){
    var elemento = document.createElement('span');
    elemento.className = "info-"+prop;
    elemento.innerHTML = pessoa[prop];
    resultado.appendChild(elemento);
    Progresso();
}

span{
   margin: 10px;
}

.progress{
  margin-top: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button onclick="InserirCampo('nome')">Inserir Nome</button>
<button onclick="InserirCampo('cpf')">Inserir CPF</button>
<button onclick="InserirCampo('endereco')">Inserir Endereço</button>
<button onclick="InserirCampo('idade')">Inserir Idade</button>

<div id="resultado"></div>


<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" id="barra"
  aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:0">
    0%
  </div>
</div>