why this html javascript file doesnt work and how can i make user input to not be anything but positive number?

Question

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>

Why is `` in the script? Also, `onClick='CalculateArea;'` should be `onClick='CalculateArea()'` — j08691, Dec 24 '21 at 19:25
What you do expect `onClick='CalculateArea;'` to do? Currently, it does nothing. Why are you using `document.write`? Familiarize yourself with the [DOM API](//developer.mozilla.org/docs/Web/API/Document_Object_Model) and with [events](//developer.mozilla.org/docs/Web/Guide/Events). — Sebastian Simon, Dec 24 '21 at 19:25
Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Dec 24 '21 at 19:26

DCR · Accepted Answer · 2021-12-24T19:55:39.067

-1

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>

edited Dec 24 '21 at 19:55

answered Dec 24 '21 at 19:32

DCR

14,737
12
52
115

Thanks that worked, cna you help me with the function for nothing but whole number and and if it is entered it returnes error – Sasa Jurosevic Dec 24 '21 at 19:36
snippet updated – DCR Dec 24 '21 at 19:55
1

`
` and `
` are the same. HTML is case-insensitive.
– Sebastian Simon Dec 24 '21 at 20:27

Rocky Sims · Answer 2 · 2021-12-24T19:49:41.070

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>

why this html javascript file doesnt work and how can i make user input to not be anything but positive number?

2 Answers2