I have two functions: One is a function that counts how many characters there are and within that of a color and percentage the progress bar for an if The other is a bar that counts how many ids there are and from that the given number, what I want is that when the first function is with the characters I want it from an id to the bar to be counted by the second.
Follow the script to illustrate
SCRIPT THAT CHANGES THE COLORS AND PERCENTAGES OF THE BAR
$(document).on("input", "[name=descricao_completa]", function () {
var limite = 0;
var caracteresDigitados = $(this).val().length;
var caracteresRestantes = limite + caracteresDigitados;
$(".caracteres").text(caracteresRestantes);
});
$(function() {
function progress(percent, $element, velocity) {
percent = percent >= 100 ? 100 : percent;
var progressBarWidth = percent * $element.width() / 100;
$element.find('div').stop().animate({ width: progressBarWidth }, velocity, "linear").html("Nivel de relevância");
}
$('[name=descricao_completa]').on('input', function(){
var value = $(this).val();
var progressValue = $('#progressText div');
var color, percent = 0;
if(value.length <= 100){
color = "red";
percent = 15;
}else if(value.length <= 199){
color = "yellow";
percent = 50;
}else{
color = "#32CD32";
percent = 100;
$('[name=descricao_completa]').attr('id', 'progressValorInteiro');
// FIZ ISSO PARA MUDAR O ID POREM NAO FUNCIONA
}
var Valor = value.length;
progress(percent, $('#progressText'), 300);
progressValue.css("background", color);
$('#progressText').css("border", "1px solid " + color);
});
});
SCRIPT THAT CHANGES THE BAR ACCORDING TO NUMBER OF IDs
$('#progressBar').change('input', function(){
});
var $progressBar = $('[id=progressTerm]'), // Barra de Progresso.
$progressElements = $('[id=progressValorInteiro]'), // Elementos que devem ser checados // para modificar o valor da barra.
$totalProgress = $progressElements.length; // Total de elementos.
$progressElements.on('change, blur', function() {
// Faz um filtro com o total elementos válidos.
// Nesse caso, campos que não estejam "em branco" e que não estejam marcados
// como ':invalid'.
var valid = $progressElements.filter(function() {
return ($(this).val() || $(this).prop('checked')) && !$(this).is(':invalid');
}).length;
// Calcula a porcentagem e altera o valor da width da barra.
var percent = (valid * 100) / $totalProgress;
console.log($progressElements)
$progressBar.width(percent+"%");
});