# How to Get Pi Value in Javascript

In this tutorial, you will learn how to get Pi value in javascript. Pi is a constant in mathematics that represents the ratio of the circumference of any circle to the diameter of that circle.

To get the value of Pi, we can make use of the `Math` object.  This object contains a lot of methods and properties which can help us in various mathematical operations. One of those properties is `PI`. The value of Pi is approximately 3.14.

In the following example, we will display the value of Pi on the screen upon click of a button.  Please have a look over the code example and the steps given below.

HTML & CSS

• We have 3 elements in the HTML file (`div`, `button`, and `h1`). The `div` element is just a wrapper for the rest of the elements.
• The `innerText` for the `button` element is `“Get Pi”` and for the `h1` element, it is `“Result”`.
• We have done some basic styling using CSS and added the link to our `style.css` stylesheet inside the `head` element.
• We have also included our javascript file `script.js` with a `script` tag at the bottom.
```<!DOCTYPE html>
<html lang="en">

<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>Document</title>

<body>

<div class="container">
<button>Get PI</button>
<h1>Result</h1>
</div>

<script src="script.js"></script>
</body>

</html>```
```.container {
text-align: center;
}

button {
margin-top: 10px;
}
```

Javascript

• We have selected the `button` element and `h1` element using the `document.querySelector()` method and stored them in `btnGet` and `output` variables respectively.
• We have attached a `click` event listener to the `button` element.
• In the event handler function, we are getting the value of Pi using `PI` property of the `Math` object and storing that in the `result` variable.
• We only want the `result` to be up to 2 decimal places and that is why we are using the `toFixed()` method and passing 2 as a parameter.
• We are displaying the `result` in the `h1` element using the `innerText` property.
```let btnGet = document.querySelector("button");
let output = document.querySelector("h1");