0
I am trying to make a system to manage the hours worked by collaborators, using only HTML and Javascript, I would like the manager to be able to dynamically insert new lines in the Form. For this I am using the following code.
<div id="origem">
<label for="init">Inicio 1: </label>
<input type="time" name="init" id="entrada1" />
<label for="end">Fim 1: </label>
<input type="time" name="end" id="saida1" />
<label for="end">Inicio 2: </label>
<input type="time" name="end" id="entrada2" />
<label for="end">Fim 2: </label>
<input type="time" name="end" id="saida2" />
<button onclick="calcular();">Calcular</button>
</div>
<span id="resultado"></span>
<div id="destino">
</div>
<button onclick="duplicarCampos();">Duplicar</button>
<script type="text/javascript">
function duplicarCampos() {
var clone = document.getElementById('origem').cloneNode(true);
var destino = document.getElementById('destino');
destino.appendChild(clone);
var camposClonados = clone.getElementsByTagName('input');
for (i = 0; i < camposClonados.length; i++) {
camposClonados[i].value = '';
}
}
function calcular() {
// Pega os dois inputs do tipo time.
const entrada1 = document.getElementById("entrada1");
const saida1 = document.getElementById("saida1");
const entrada2 = document.getElementById("entrada2");
const saida2 = document.getElementById("saida2");
// Pega os valores dos inputs e substitui os dois pontos por uma string vazia,
// depois faz o cálculo para obter o valor desejado.
const result = ((saida1.value.replace(":", "") - entrada1.value.replace(":", "")) + (saida2.value.replace(":", "") - entrada2.value.replace(":", ""))) * 5 + "";
// Pega a metade da string.
const metade = Math.floor(result.length / 2);
// Pega a primeira parte da string e concatena ela com os dois pontos,
// em seguida pega a segunda parte da string e a concatena também.
document.getElementById("resultado").innerHTML =
result.substr(0, metade) + ":" + result.substr(metade);
}
</script>
In the first line, I can perfectly calculate what is inserted, however, when I get a new line down in the Form, the system is picking up the information typed earlier, I believe it is motivated by me being cloning everything inside my Div, so much so that if an Alert is placed just below the field: document.getElementById("resultado").innerHTML = result.substr(0, metade) + ":" + result.substr(metade);
, it returns the value typed in the first line of the Form, if anyone has a solution to adjust this Code thank you very much.