I am trying to get user input from the textbox and then click the button beside in order to calculate the area of a circle. Problem is alert always prints NaN.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="./css/style.css">
<script>
const PI = 3.14159;
function getAreaOfCircle(rad) {
let area = PI * Math.pow(rad, 2);
alert(area);
}
</script>
</head>
<body>
<input type="text" placeholder="Type something..." id="myInput">
<input type="button" onclick="getAreaOfCircle();" value="Calculate Area of a Circle">
</body>
</html>You have to pass input value on your function. As you're code to pass it on your function as argument/parameter. So you can code it like that:
<input type="button" onclick="getAreaOfCircle(document.getElementById('myInput').value);" value="Calculate Area of a Circle">
You need to get the actual input text and convert its value into a floating number:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="./css/style.css">
<script>
const PI = 3.14159;
function getAreaOfCircle() {
//Get the radius from the input field
let rad = document.getElementById("myInput").value;
//Check if the input is not empty, if it is set rad to 0
rad = rad !== "" ? parseFloat(rad) : 0;
let area = PI * Math.pow(rad, 2);
alert(area.toFixed(2));
}
</script>
</head>
<body>
<input type="text" placeholder="Enter the circle radius" id="myInput">
<input type="button" onclick="getAreaOfCircle();" value="Calculate Area of a Circle">
</body>
</html>
You are not passing rad in the function getAreaOfCircle
So you can get value inside the function getAreaOfCircle as:
const rad = document.querySelector("#myInput").value;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="./css/style.css">
<script>
const PI = 3.14159;
function getAreaOfCircle() {
const rad = document.querySelector("#myInput").value;
let area = PI * Math.pow(rad, 2);
alert(area);
}
</script>
</head>
<body>
<input type="text" placeholder="Type something..." id="myInput">
<input type="button" onclick="getAreaOfCircle();" value="Calculate Area of a Circle">
</body>
</html>