Calculate worked hours, with button that adds fields in the Form (Javascript, HTML)

Asked

Viewed 36 times

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.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.