When I run this code it just says NaN or not a number. What could I do to fix this?

Question

Also I'm really new to code, and this website. This is an area of a circle calculator. The equation for area of a circle is 3.14 * r * r.

    <input type="Number" id="index_radius">
    <br><button onclick="myfunction()">Calculate</button>
    <script>
        function myfunction() {
            var radius = document.getElementById("index_radius");
            var calculate = radius * radius * 3.14;
            console.log(calculate)
        }

Answer 1

The problem is that the radius variable is equal to the html element, not the actual value. To get the value as a number, you can addd .valueAsNumber the following code works.

 function myfunction() { var radius = document.getElementById("index_radius").valueAsNumber; var calculate = radius * radius * Math.PI; console.log(calculate) }

 <input type="Number" id="index_radius"> <br><button onclick="myfunction()">Calculate</button>