why this html javascript file doesnt work and how can i make user input to not be anything but posit-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>