JavaScript simple function doesn't return anything

Question

I' m new to JavaScript and am writing a function which has to calculate circle area. But the problem here is that I don't fully understand the concept of functions. So here is my Html code where i have 2 div elements with specific ID. I want my function to take the innerHTML from the first div and according to the given formula int the function to output the result into the second div. Can you help me cause maybe I make some huge error inhere.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
      <title>Circle Area</title>
      <meta charset="utf-8" />
</head>
<body>
      <div id="area">7</div>
      <div id="output"></div>
      <script type="text/javascript" src="circle-area.js"></script>
</body>
</html>

And here is my Js file

function calcCircleArea(r, formula) {
r = document.getElementById("area").innerHTML;
var formula = Math.PI * (r * r);
return formula;
}
document.getElementById("output").innerHTML = formula;

adeneo · Accepted Answer · 2014-07-14 11:18:50Z

2

You have to call the function

function calcCircleArea() {
    var r       = document.getElementById("area").innerHTML;
    var formula = Math.PI * (r * r);
    return formula;
}

document.getElementById("output").innerHTML = calcCircleArea();

FIDDLE

answered Jul 14, 2014 at 11:18

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Think Different · Accepted Answer · 2014-07-14 11:21:18Z

1

You don't need argument in the function as you are not passing any parameters to the function. You need to call the function. Change your javascript to:

 function calcCircleArea() {
     r = document.getElementById("area").innerHTML;
     var formula = Math.PI * (r * r);
     return formula;
 }
 document.getElementById("output").innerHTML = calcCircleArea();

answered Jul 14, 2014 at 11:21

Think Different

2,8251 gold badge14 silver badges18 bronze badges

Comments

Nikolai Kim · Accepted Answer · 2014-07-14 11:25:06Z

1

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Circle Area</title>
    <meta charset="utf-8" />
    <script>
      // There is no need to declare argument variables once again
      // Besides, it's better to get radius from outside, i.e. from function call
      function calcCircleArea(r) {
        return Math.PI * (r * r);
      }
    </script>
  </head>
  <body>
    <div id="area">7</div>
    <div id="output"/>
    <script>
      document.getElementById("output").innerHTML = calcCircleArea(document.getElementById("area").innerHTML);
    </script>
  </body>
</html>

answered Jul 14, 2014 at 11:25

Nikolai Kim

7158 silver badges23 bronze badges

Comments

Mohanraj S K · Accepted Answer · 2014-07-14 11:59:44Z

0

<html>
<body>
<p>This example calls a function which performs a calculation, and returns the result:</p>

<p id="demo"></p>

<script>

function myFunction(a, b) {

    return a * b;

}

document.getElementById("demo").innerHTML = myFunction(4, 3);

</script>

</body>

    enter code here

</html>

This is a simple example for use script inside the html file. It may helps.

answered Jul 14, 2014 at 11:59

Mohanraj S K

6575 silver badges17 bronze badges

Collectives™ on Stack Overflow

JavaScript simple function doesn't return anything

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related