Problemas com JavaScript/WebForm

Question

Boa tarde Pessoal,
Ainda estou aprendendo asp.net e preciso da ajuda de vocês.
Estou criando uma rotina de cadastro e quero utilizar javascript para fazer alguns cálculos.
Nesse meu caso, eu tenho três campos e preciso que o terceiro seja a diferença entre os dois primeiros, eu tentei criar uma function, mas nao consegui evoluir:

Neste caso eu quero que o terceiro campo carregue  o total entre os dois primeiros campos no momento evento keyup do segundo campo.

Vejam:

<div  id="div_atividade1" class="row" style="display:none;" >   
        <div class="form-group col-md-2">     
            <label for="txt_atividade1">Inicio1</label>
            <asp:TextBox CssClass="form-control" ID="txt_atividade1_inicio"  runat="server" placeholder=""               name="txt_atividade1_inicio" type="time" Enabled="true" />    
        </div>


        <div class="form-group col-md-2">   
            <label for="txt_atividade1">Fim</label>
            <asp:TextBox CssClass="form-control" ID="txt_atividade1_fim"  runat="server" placeholder="" name="txt_atividade1_fim" type="time" Enabled="true" onkeyup="calcula_tempo_atividade_1()" />                                                                                                                                                                                 
        </div>


        <div class="form-group col-md-2">
            <label for="txt_atividade1">Total</label>
            <asp:TextBox CssClass="form-control" ID="txt_atividade1_total"  runat="server" placeholder="" name="txt_atividade1_total" type="text" Enabled="false"  "/>
        </div>
    </div>

/// eu tentei criar uma function no arquivo site.master, mas sem sucesso:

function calcula_tempo_atividade_1() {
            var tempo_1 = document.getElementById('txt_atividade1_inicio');
            var tempo_2 = document.getElementById('txt_atividade1_fim');
            var total = tempo_1 - tempo_2;  
            return total;
        }

Agradeceria muito se me ajudassem.
Obrigado.

Answer 1

Mude de onkeyup para onfocusout.

Deixe sua function assim:

function calcula_tempo_atividade_1() {
 
    var tempo_1 = document.getElementById('txt_atividade1_inicio').value;
    var tempo_2 = document.getElementById('txt_atividade1_fim').value;
    var total = tempo_1 - tempo_2;
 
    /* setar valor no input total */
    document.getElementById('txt_atividade1_total').value = total;
 
    return total;
}

Answer 2

NAo deu certo Luciano esmo assim ocorre este erro no debugger do firefox:
TypeError: document.getElementById(...) is null[Learn More] Registro_OSM:143:27

• calcula_tempo_atividade_1 http://localhost:63534/Registro_OSM:143
• onfocusout http://localhost:63534/Registro_OSM:1

Answer 3

fiz um teste aqui e executou, mas coloquei numero inteiro, no seu caso qual tipo de valor esta digitando?
fiz um teste assim:
valor 1 = 100
valor 2 = 200
resultado deu = -100 para esta invertido no seu codigo.

Answer 4

to passando  o value do campo txt_atividade1_inicio

var tempo_1 = document.getElementById('txt_atividade1_inicio').value;

Answer 5

ele parece nao estar aceitando a propriedade  ".value"'

 document.getElementById('txt_atividade1_inicio').value;