Ive tried few things and none of them works, it doesnt calculate the area, and i want to make user input to be positive number and send error if anything else is written
<!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>first you need to add () to your function call. Second, it's <p> not <P> and third you probably don't want to use 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>