Enter no formulario recarrega a pagina e apaga os dados sem calcular

[tiloreboucas]

Onde

JS-logica-de-programacao/modelo/index.html:35 (form) e :61 (botao)

O que acontece

O <form action=""> nao tem nenhum listener de submit, e o botao e type="button". Quem digita os valores e aperta Enter (comportamento natural em formulario) dispara a submissao implicita do HTML: a pagina recarrega, os campos esvaziam e nada e calculado.

O preventDefault() que existe hoje esta no handler de click, e o Enter nao dispara click.

Como reproduzir

1. Clicar no campo Peso e digitar 70
2. Tab
3. Digitar 1.75
4. Apertar Enter

Resultado: pagina recarregada, os dois campos vazios, nenhum resultado exibido.

Impacto

Quem navega por teclado nao consegue usar a calculadora. Somado a issue #5, o fluxo por teclado fica inviavel de ponta a ponta.

Correcao sugerida

Trocar o botao para type="submit" e mover o handler para o evento submit do form, para que clique e Enter passem pelo mesmo caminho:

<button type="submit" class="botao">Calcular</button>

const form = document.querySelector("form");

form.addEventListener("submit", function (evento) {
  evento.preventDefault();
  // mesma logica de hoje
});

Beneficio adicional: com o botao como submit, a validacao nativa do HTML (min, max, step) passa a ser aplicada de fato. Hoje ela e ignorada.