2

Estou quebrando a cabeça pra fazer meu javascript copiar para uma nova variável os valores passados por um formulário no HTML. Alguém poderia me dar uma luz?

Meu HTML está assim:

<div class="imc"><!--primeiro container-->
            <section class="container">
       <h3>Calculadora de Índice de Massa Corporal (IMC).</h3>
                <form id="formIMC" onsubmit="calculaImc()">
                <!--<form id="formIMC">-->
                    <label>
                    Altura:
          <input type="text" id="altura" name="altura" maxlenght="5" size="5" autocomplete="off" required>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    Peso (kg):
                            <input type="text" id="peso" name="peso" maxlenght="5" size="5" autocomplete="off" required>
           </label>
                    <br></br>
                    <!--<button id="calcID" onsubmit="calculaImc()">Calcular</button>-->
                    <input type="submit" value="Calcular">
                </form>
   </section><!--Fim do container-->
        </div>

E meu javascript está assim:

function calculaImc() {
    var alturaJS = document.getElementById("altura").getAttribute('altura');
    var pesoJS = document.getElementById("peso").getAttribute('peso');
    alert (alturaJS + " " + pesoJS);
};

No entanto, meu alert só retorna "null null". Alguém sabe o que está acontecendo? Ou melhor, no que estou errando?

Grato.

1 Resposta 1

3

Seu código tem alguns problemas de estruturação, e basicamente seu erro está nesse trecho

var alturaJS = document.getElementById("altura").getAttribute('altura');
var pesoJS = document.getElementById("peso").getAttribute('peso');

A função getAttribute pega o valor de um dos atributos do seu elemento, e não seu valor. Troque o .getAttribute('x') por value e tudo deverá ocorrer bem. Veja abaixo uma demonstração do seu código refeito e funcionando:

document.forms['formIMC'].onsubmit = function() {
  var alturaJS = document.getElementById('altura').value;
  var pesoJS = document.getElementById('peso').value;
  alert(alturaJS + " " + pesoJS);
}
<div class="imc">
  <!--primeiro container-->
  <section class="container">
    <h3>Calculadora de Índice de Massa Corporal (IMC).</h3>
    <form id="formIMC">
      <label for="altura">Altura:</label>
      <input type="text" id="altura" name="altura" maxlenght="5" size="5" autocomplete="off" required>

      <label for="peso">Peso (kg):</label>
      <input type="text" id="peso" name="peso" maxlenght="5" size="5" autocomplete="off" required>
      <br></br>

      <input type="submit" value="Calcular">
    </form>
  </section>
  <!--Fim do container-->
</div>

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 .