How can I print the return value of a JavaScript function in HTML?

Question

I'm creating a code in which the user can calculate the area of a rectangle. After inputting the height and width when prompted, the site should then print the height, width, and area values within a table. The height and width code works and prints properly, but the area will not print. Where am I going wrong?

Here is the separate JavaScript code.

var height = prompt("Please enter the height");
var width = prompt("Please enter the width");

function calcArea(height,  width) {
var area = height * width;
return area;
}

Here is the HTML code in which the JavaScript's outputs are coded.

<table>
<caption>Calculate the Area of a Rectangle</caption>
<tr><td class="makert">Height:</td>
<td  class="makectr">&nbsp;<script>document.write(height);</script></td></tr>
<tr><td  class="makert">Width:</td>
<td class="makectr">&nbsp;<script>document.write(width);</script></td></tr>
<tr><td  class="makert">Area:</td>
<td class="makectr">&nbsp;<script>document.write(area);</script></td></tr>
</table>

Height and width are globally scoped. Area is a return value, not a global variable. — stealththeninja
– stealththeninja, Commented Jan 29, 2019 at 20:32

Lorenz Meyer · Accepted Answer · 2019-01-29 20:34:45Z

5

You should use your function:

<script>document.write(calcArea(height,  width));</script>

The point of declaring a function is to use it later.

answered Jan 29, 2019 at 20:34

Lorenz Meyer

20.1k23 gold badges83 silver badges130 bronze badges

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

1 Comment

codestudent Over a year ago

Thanks for the help! All answers were helpful but this was simple enough for my inexperienced self to understand. Fixed my issue quickly :)

Danyal Imran · Accepted Answer · 2019-01-29 20:40:13Z

Its because area is a local variable to the calcArea method and the document object doesn't have access to it.

var area = 0;
var height = prompt("Please enter the height");
var width = prompt("Please enter the width");

Try this code instead since the above way isn't a practical way of coding:

var height = prompt("Enter Height: ");
var width = prompt("Enter Width: ");

(function calcArea() {
  var area = +height * +width;
  document.getElementsByClassName('makectr')[0].innerHTML = height;
  document.getElementsByClassName('makert')[1].innerHTML = width;
  document.getElementsByClassName('makectr')[2].innerHTML = area;
})();

<table>
  <caption>Calculate the Area of a Rectangle</caption>
  <tr>
    <td class="makert">Height: </td>
    <td class="makectr"></td>
  </tr>
  <tr>
    <td class="makert">Width: </td>
    <td class="makectr"></td>
  </tr>
  <tr>
    <td class="makert">Area: </td>
    <td class="makectr"></td>
  </tr>
</table>

Haris Bouchlis · Accepted Answer · 2019-01-29 20:33:24Z

2

The area variable is declared inside the function, so it does not exist outside of the function's scope.

Try something like this

var area = "...";

function calcArea(height,  width) {
  area = height * width;
  return area;
}

also your function is never called, so area is never actually given a value.

answered Jan 29, 2019 at 20:33

Haris Bouchlis

2,5861 gold badge25 silver badges39 bronze badges

1 Comment

Lorenz Meyer Over a year ago

It is a bad idea to declare a global variable where not needed. Here it will even lead to more confusion, because this variable is modified inside the function and then returned.

Kamil Kiełczewski · Accepted Answer · 2019-01-29 20:52:14Z

You can use following code to calc values and separate JS and HTML

var q= s=>document.querySelector(s);

function calcArea(height, width) {
  var area = height * width;
  q('.heigh').innerHTML=height;
  q('.width').innerHTML=width;
  q('.area').innerHTML=area;
  return area;
}

function btnClick() {
  var height = prompt("Please enter the height");
  var width = prompt("Please enter the width");
  calcArea(height, width);
  q('table').style.display='block'
}

<table style="display:none">
<caption>Calculate the Area of a Rectangle</caption>
<tr><td class="makert">Height: </td><td  class="heigh makectr"></td></tr>
<tr><td class="makert">Width: </td><td class="width makectr"></td></tr>
<tr><td class="makert">Area: </td><td class="area makectr"></td></tr>
</table>

<button onclick="btnClick()">Calc area</button>

Collectives™ on Stack Overflow

How can I print the return value of a JavaScript function in HTML?

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related