Why this code wont run, what is wrong with it ? When i try to run it it just gives me a black page, ive ran it through a html validator and it says its all good. if someone can help me id be very greatful

<!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>

CodePudding user response：

new answer

so in the r variables is not more selecting the whole form

but the only input you need (in the html I assigned a new id for the input)

infact in js now is selecting the input, and getting the .value directly from there :)

<!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>

previous answer

sometimes the ide beautify the code wrong,

not because you write wrong,

but because you insert html code in javascript... so technically the ide think that you writing js... (that the result)

no problem, here the solution

copy the <form> code

<form>

    ...

</form>

CRTL X for copy it
put in the start with CTRL C ( outside of <script> tag)
try to delete the spaces between the name of the tag and the < or >

here the code

<!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>

CodePudding user response：

The element belongs outside the script element, in the document .

<!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>