He intentado algunas cosas y ninguna de ellas funciona, no calcula el área, y quiero que la entrada del usuario sea un número positivo y envíe un error si se escribe algo más.
<!DOCTYPE html> <html> <head> <title> Area of circle </title> </head> <body> <script type="text/javascript"> <meta charset="UTF-8"> function CalculateArea(){ var r = document.form1.txtr.value; var area = (r * r * Math.PI); document.write("<P> Area is:" + area +"</P>") } </script> <form name=form1> Type radient of circle: <input type="text" name="txtr" size=10> <br> <input type="button" value="Calculate" onClick='CalculateArea;'> </form> </body> </html>primero necesita agregar () a su llamada de función. Segundo, es <p> no <P> y tercero probablemente no quieras usar document.write.
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; } <!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> </html> document.addEventListener('DOMContentLoaded', () => { const inputElem = document.querySelector('#radius'); const buttonElem = document.querySelector('#button'); const outputElem = document.querySelector('#output'); buttonElem.addEventListener('click', () => { const r = inputElem.value; if (r >= 0 && r % 1 === 0) { outputElem.innerHTML = calcArea(r); } else { alert('Please enter a positive, whole number radius.'); } }); }); function calcArea(r) { return r * r * Math.PI; } <!DOCTYPE html> <html> <head> <title>Area of circle</title> <meta charset="UTF-8"> </head> <body> <input type="text" id="radius"></input> <input type="button" id="button" value="Calculate"></input> <div id="output"></div> </body> </html>