0

Estou começando com Js no técnico e estou tentando obter o valor da textbox pelo document.getElementById e em seguida fazer operações para retornar o valor pelo alert mas sem sucesso. Segue código:

<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <script language="Javascript">
    var kminicial = parseInt(document.getElementById("1").value);
    var kmfinal = parseInt(document.getElementById("2").value);
    var abast = parseInt(document.getElementById("3").value);
    var dist=kmfinal-kminicial;
    var mediakm=dist/abast;
    function calcula() {
        alert("A distância percorrida é: " + dist + "\n" + "A média de km por litros é:" + mediakm);    
    }
    </script>
</head>
<body>
    <p> Quilometragram Inicial: <input type="text" name="kminicial" id="1"> 
    <p> Quilometragram Final: <input type="text" name="kmfinal" id="2"> 
    <p> Litros Abastecidos: <input type="text" name="abast" id="3"> 
    <br><br><br><input type="button" name="calcula" value="Calcular" onclick="calcula()">
</body>

1
  • 1
    Declare todas as variáveis dentro da função, que provavelmente irá funcionar. 1/11/2017 às 12:22

1 Resposta 1

1

Os ids não podem ter apenas números. Tem de ter pelo menos uma letra, como pode ver aqui na documentação da W3C:

and must contain at least one character

Para além disso o código como está interpreta logo de inicio o valor dos campos, quando faz:

var kminicial = parseInt(document.getElementById("1").value);

Sem que a página tenha sido carregada ou mesmo o usuário preenchido os campos. Deve fazer essas leituras apenas na função calcula.

Veja o exemplo:

<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <script language="Javascript">
    
    function calcula() {
      //agora as leituras do html são feitas apenas quando calcula
      var kminicial = parseInt(document.getElementById("c1").value); //agora c1
      var kmfinal = parseInt(document.getElementById("c2").value);
      var abast = parseInt(document.getElementById("c3").value);
      var dist=kmfinal-kminicial;
      var mediakm=dist/abast;
    
      alert("A distância percorrida é: " + dist + "\n" + "A média de km por litros é:" + mediakm);    
    }
    </script>
</head>
<body>
    <p> Quilometragram Inicial: <input type="text" name="kminicial" id="c1"><!--id c1--> 
    <p> Quilometragram Final: <input type="text" name="kmfinal" id="c2"> 
    <p> Litros Abastecidos: <input type="text" name="abast" id="c3"> 
    <br><br><br><input type="button" name="calcula" value="Calcular" onclick="calcula()">  
</body>

Repare que para ser consistente com a documentação troquei os ids: 1,2,3 para c1,c2,c3 e ajustei os respetivos getElementById.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .