¿Por qué este código no se ejecuta? ¿Qué tiene de malo? Cuando trato de ejecutarlo, solo me da una página negra, lo ejecuté a través de un validador de HTML y dice que todo está bien. Si alguien me puede ayudar le estaría muy agradecido.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> Area of circle </title> </head> <body> <script type="text/javascript"> function CalculateArea(){ var r = document.getElementById('form1').value; let p = document.getElementById('area') var area = (r * r * Math.PI); if (r%1 !=0 || r < 1) p.innerHTML = 'Please enter a whole number greater than 0'; else p.innerHTML = area; } <form id='form1'> Type radient of circle: <input type="text" name="txtr" size=10> <br> <input type="button" value="Calculate" onClick='CalculateArea()'> <p id='area'></p> </form> </script> </body> </html>El elemento pertenece fuera del elemento script, en el documento.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> Area of circle </title> </head> <body> <form id='form1'> Type radient of circle: <input type="text" name="txtr" size=10> <br> <input type="button" value="Calculate" onClick='CalculateArea()'> <p id='area'></p> </form> </body> <script type="text/javascript"> function CalculateArea() { var r = document.getElementById('form1').value; let p = document.getElementById('area') var area = (r * r * Math.PI); if (r%1 !=0 || r < 1) p.innerHTML = 'Please enter a whole number greater than 0'; else p.innerHTML = area; } </script> </html> entonces en las variables r no es más seleccionar la forma completa
pero la única entrada que necesita (en el html asigné una nueva id para la entrada)
de hecho, en js ahora está seleccionando la entrada y obteniendo el .value directamente desde allí :)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> Area of circle </title> </head> <body> <form id="form1"> Type radient of circle: <input type="text" name="txtr" id="r-input" value="10"> <br> <input type="button" value="Calculate" onclick="CalculateArea()"> <p id="area"> </p> </form> <script type="text/javascript "> function CalculateArea() { var r = document.getElementById('r-input').value; let p = document.getElementById('area'); var area = (r * r * Math.PI); if (r % 1 != 0 || r < 1) { p.innerHTML = 'Please enter a whole number greater than 0'; console.log("r " + r); console.log("area " + area); } else { p.innerHTML = area; } } </script> </body> </html>a veces la ide embellece mal el código,
no porque escribas mal,
pero debido a que inserta el código html en javascript ... entonces, técnicamente, la idea cree que está escribiendo js ... (que el resultado)
<form> <form> ... </form> CRTL X para copiarlo
poner al principio con CTRL C (fuera de la etiqueta <script> )
intente eliminar los espacios entre el nombre de la etiqueta y el < o >
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> Area of circle </title> </head> <body> <form id='form1'> Type radient of circle: <input type="text" name="txtr" size=1 0> <br> <input type="button" value="Calculate" onClick='CalculateArea()'> <p id='area'> </p> </form> <script type="text/javascript"> function CalculateArea() { var r = document.getElementById('form1').value; let p = document.getElementById('area') var area = (r * r * Math.PI); if (r % 1 != 0 || r < 1) { p.innerHTML = 'Please enter a whole number greater than 0'; } else { p.innerHTML = area; } } </script> </body> </html>