Estoy tratando de intentar el siguiente ejercicio de SAMS Teach Yourself Learn JavaScript in 21 Days ;
"Mire el Listado 7.1 y adáptelo de modo que en lugar de usar cuadros de solicitud, los números se ingresen usando un formulario XHTML".
El listado 7.1 es el siguiente;
<html> <head> <title>Precision of numbers</title> <script type="text/javascript" language="javascript"> <!-- function Calculate(){ var n = 10.0 / 3.0; document.write("10.0 divided by 3.0 is " + n); } --> </script> </head> <body onload="Calculate()"> </body> </html>Aquí está mi intento, pero solo voy a poner el script JS y el fragmento de formulario;
<script type="text/javascript" language="javascript"> <!-- function SetFocus(){ document.Precision.FirstInput.focus(); } function Calculate(){ var num1 = parseInt(document.getElementById('FirstInput').value); var num2 = parseInt(document.getElementById('SecondInput').value); if (isNaN(num1) || isNaN(num2){ alert("You made an invalid entry. Please start again."); document.SimpleForm.reset(); SetFocus(); } else{ var result document.getElementById('result').value = num1 / num2; } } --> </script>Y el formulario html
<form name="Precision"> <p> <strong>Enter first number:</strong> <input type="text" name="FirstInput" id="FirstInput" /> </p> <p> <strong>Enter second number:</strong> <input type="text" name="SecondInput" id="SecondInput" /> </p> <p> <strong>The answer is:</strong> <input type="text" name="result" id="result" /> </p> <p> <button onclick="Calculate()">Click here to calculate</button> </p> </form>Mi problema es que el botón no está ejecutando la función y me gustaría saber por qué.
¡Arreglé su código y agregué algunos comentarios para obtener más explicaciones!
function SetFocus() { document.Precision.FirstInput.focus(); } function Calculate() { var num1 = parseInt(document.getElementById("FirstInput").value); var num2 = parseInt(document.getElementById("SecondInput").value); if (isNaN(num1) || isNaN(num2)) { // add closed parenthesis alert("You made an invalid entry. Please start again."); document.Precision.reset(); // target Precision form not SimpleForm!? SetFocus(); } else { document.getElementById("result").value = num1 / num2; } } <body onload="SetFocus()"> <!-- when the page load set focus to first input --> <form name="Precision"> <p> <strong>Enter first number:</strong> <input type="text" name="FirstInput" id="FirstInput" /> </p> <p> <strong>Enter second number:</strong> <input type="text" name="SecondInput" id="SecondInput" /> </p> <p> <strong>The answer is:</strong> <input type="text" name="result" id="result" /> </p> <p> <button onclick="Calculate()" type="button"> <!-- add type="button" to prevent form a page from reload --> Click here to calculate </button> </p> </form> </body>Notas al margen:
<!-- --> es una etiqueta de comentario HTML./* ) y terminan con un asterisco seguido de una barra inclinada ( */ ). Dentro de la etiqueta del script , escribe JS , no HTML , por lo que usaría (/**/) para comentar, no uno usado por HTML ( <!-- --> ).