Bem, basicamente o que entendi é que você deseja capturar as mudanças de cada elemento da classe ocultosOuOpcionais
e depois somá-los:
Capturando a diferença de caracteres
Como vem explicado nessa pergunta a melhor maneira de se calcular a diferença entre duas strings é utilizando o algoritmo da Distância de Levenshtein:
function levenshtein(str1, str2) {
var m = str1.length,
n = str2.length,
d = [],
i, j;
if (!m) return n;
if (!n) return m;
for (i = 0; i <= m; i++) d[i] = [i];
for (j = 0; j <= n; j++) d[0][j] = j;
for (j = 1; j <= n; j++) {
for (i = 1; i <= m; i++) {
if (str1[i-1] == str2[j-1]) d[i][j] = d[i-1][j-1];
else d[i][j] = Math.min(d[i-1][j], d[i][j-1], d[i-1][j-1])+1;
}
}
return d[m][n];
}
Nesse meu exemplo a função recebe o nome de captureChanges()
.
Para capturar essa diferença do valor inicial e atual de uma input
, usa-se o .defaultValue
e o .value
, respectivamente. Eu adaptei ao seu código da seguinte maneira:
var ocultosOuOpcionais = [].slice.call(document.querySelectorAll(".ocultosOuOpcionais"));
var mudados = [];
var mudancas = [];
var ocultosOuOpcionaisMudados = 0;
ocultosOuOpcionais.forEach(function (input, indice) {
input.addEventListener("input", function (event) {
if (event.target.defaultValue == event.target.value) {
mudados[event.target.id] = 0;
} else {
mudados[event.target.id] = event.target.defaultValue;
}
mudancas[indice] = captureChanges(mudados[event.target.id], event.target.value);
});
O código acima é uma adaptação ao JsFiddle do TobyMosque presente nos comentários da pergunta.
Feito isso, basta somar as diferenças de cada input
:
input.addEventListener('keyup', function(){
mudancas.forEach(function(el, index){
ocultosOuOpcionaisMudados += parseFloat(el);
})
ocultosOuOpcionaisMudados = 0; // É importante que ao final se zere o valor para que não se acumule exacerbadamente
})
Juntando todo o código
function captureChanges(str1, str2) {
var m = str1.length,
n = str2.length,
d = [],
i, j;
if (!m) return n;
if (!n) return m;
for (i = 0; i <= m; i++) d[i] = [i];
for (j = 0; j <= n; j++) d[0][j] = j;
for (j = 1; j <= n; j++) {
for (i = 1; i <= m; i++) {
if (str1[i - 1] == str2[j - 1]) d[i][j] = d[i - 1][j - 1];
else d[i][j] = Math.min(d[i - 1][j], d[i][j - 1], d[i - 1][j - 1]) + 1;
}
}
return d[m][n];
}
var ocultosOuOpcionais = [].slice.call(document.querySelectorAll(".ocultosOuOpcionais"));
var mudados = [];
var mudancas = [];
var n = 0;
var ocultosOuOpcionaisMudados = 0;
ocultosOuOpcionais.forEach(function(input, indice) {
input.addEventListener("input", function(event) {
if (event.target.defaultValue == event.target.value) {
mudados[event.target.id] = 0;
} else {
mudados[event.target.id] = event.target.defaultValue;
}
mudancas[indice] = captureChanges(mudados[event.target.id], event.target.value);
});
input.addEventListener('keyup', function() {
mudancas.forEach(function(el, index) {
n += parseFloat(el);
})
ocultosOuOpcionaisMudados = n;
n = 0;
document.getElementsByTagName("h4")[0].innerHTML = "Mudanças no total:";
document.getElementsByTagName("p")[0].innerHTML = ocultosOuOpcionaisMudados;
})
});
<input type="text" class="ocultosOuOpcionais">
<br>
<input type="text" class="ocultosOuOpcionais">
<br>
<input type="text" class="ocultosOuOpcionais">
<br>
<input type="text" class="ocultosOuOpcionais">
<br>
<h4></h4>
<p></p>