Tengo una pieza simple de HTML como esta, almacenada en hr.html
<html> <head> <title>Heart rate</title> </head> <body> <form> <label for="age">Age: </label> <input type="text" id="age" name="age"><br><br> <label for="restHR">Resting HR: </label> <input type="text" id="restHR" name="restHR"><br><br> <input type="submit" value="Submit" onclick="printResult()"> </form> <div id='output'></div> <script> const calTargetHR = (age, restHR) => { let targetHR = (((220 - age) - restHR)) + restHR; return targetHR } const printResult = () => { document.getElementById("output").innerHTML = calTargetHR( document.getElementById('age').value, document.getElementById('restHR').value ) } </script> </body> </html>Lo ejecuto simplemente haciendo doble clic en el archivo. En la barra de direcciones se muestra como:
file:///C:/Users/work/hr.html?age=&restHR=El problema es que si ingreso algún valor y presiono el botón Enviar, no muestra el resultado porque la ruta se convierte en:
file:///C:/Users/c21127478/CM6612%20Web/topic3/work/hr.html?age=3&restHR=4¿Cómo puedo solucionar esto?
Puede agregar return false al final de la instrucción onClick. Esto evita el comportamiento HTML5 predeterminado de un formulario: W3C El elemento de botón
<input type="submit" value="Submit" onclick="printResult();return false">