calculate circumference with given radius

Question

I am trying to calculate and display the circumference by retrieving the already defined radius from the given code of a drawn circle. Is it the way I typed out the formula wrong or does it need to be in the same script section?

function draw() {
  var canvas = document.getElementById('circle');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var X = canvas.width / 2;
    var Y = canvas.height / 2;
    var R = 45;
    ctx.beginPath();
    ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
    ctx.lineWidth = 3;
    ctx.strokeStyle = '#FF0000';
    ctx.stroke();
  }
}

function calculatecircumference() {
  var circumference = ((2) * (Math.Pi) * (R));
}

document.getElementById("Circumference").innerHTML = circumference;

<!Doctype>
<html>

<body onload="draw();">
  <canvas id="circle" width="150" height="150"></canvas>
</body>

<p>Circumference: <span id="Circumference"></span></p>

</html>

Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Sebastian Simon, Nov 12 '17 at 23:29
I"m expecting it to display the circumference and the current result shows nothing but the circle. — Becky Sue, Nov 12 '17 at 23:29
Your variable `R` is defined in a different function, and is therefore not visible inside `calculatecircumference()`. Declare it as global. Same goes for `circumference`. Also that line that sets the `innerHTML` needs to be inside the function. — Pointy, Nov 12 '17 at 23:29
The problem isn't that `document.getElementById("Circumference")`, but rather that the variable `circumference` is defined inside a function that is never called. Same with `calculatecircumference()` not having scope to see the variable `R` defined in `draw()`. — Obsidian Age, Nov 12 '17 at 23:29
@ObsidianAge The DOM issue is still a valid issue. Before your edit, the ` — Sebastian Simon, Nov 12 '17 at 23:31
@BeckySue Use the [browser console (dev tools)](https://webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. — Sebastian Simon, Nov 12 '17 at 23:32

score 0 · Answer 1 · answered Nov 12 '17 at 23:33

Actually the math PI is wrong....you have written Math.Pi

var circumference = ((2) * (Math.Pi) * (R));

but in actual it is Math.PI

var circumference = ((2) * (Math.PI) * (R));

Hence it Returns a NaN for a radius of 45 ..

Check the working below code.... also you need to call the calculatecircumference function..and pass the Radius as param

function draw() {
  var canvas = document.getElementById('circle');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var X = canvas.width / 2;
    var Y = canvas.height / 2;
    var R = 45;
    ctx.beginPath();
    ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
    ctx.lineWidth = 3;
    ctx.strokeStyle = '#FF0000';
    ctx.stroke();
 calculatecircumference(R);
  }
}

function calculatecircumference(R) {
  var circumference = ((2) * (Math.PI) * (R));
    
document.getElementById("Circumference").innerHTML = circumference;

}

<body onload="draw();">
  <canvas id="circle" width="150" height="150"></canvas>
</body>

<p>Circumference: <span id="Circumference"></span></p>

you are missing the chain... call calculatecircumference within the draw,,,and call the insertion with in calculatecircumference .... — Rohit Kumar, Nov 12 '17 at 23:39
a chain of events calling each another ...hope that helped :) — Rohit Kumar, Nov 12 '17 at 23:40

score 0 · Answer 2 · answered Nov 12 '17 at 23:36

You have three problems:

First, you need to give calculatecircumference() scope to access R. This can be done by calling calculatecircumference() from within draw() and passing it through as a function parameter. You'll also need to tell calculatecircumference() that its function parameter should be assigned to the local variable R, by writing it as calculatecircumference(R).
Second, document.getElementById("Circumference").innerHTML does not have access to the scope of circumference. Simply run the line document.getElementById("Circumference").innerHTML = circumference line inside caluclatecircumference().
Finally, you called Math.Pi instead of Math.PI in calculatecircumference(). The PI must be uppercase.

Correcting these three issues fixes the problem, as can be seen below:

function draw() {
  var canvas = document.getElementById('circle');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var X = canvas.width / 2;
    var Y = canvas.height / 2;
    var R = 45;
    ctx.beginPath();
    ctx.arc(X, Y, R, 0, 2 * Math.PI, false);
    ctx.lineWidth = 3;
    ctx.strokeStyle = '#FF0000';
    ctx.stroke();
    calculatecircumference(R);
  }
}

function calculatecircumference(R) {
  var circumference = ((2) * (Math.PI) * (R));
  document.getElementById("Circumference").innerHTML = circumference;
}

<!Doctype>
<html>

<body onload="draw();">
  <canvas id="circle" width="150" height="150"></canvas>
</body>

<p>Circumference: <span id="Circumference"></span></p>

</html>

Hope this helps! :)

calculate circumference with given radius

2 Answers2