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

admin管理员组

文章数量:1312708

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>

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>

• javascript
• html

Share Improve this question Follow asked Jan 29, 2019 at 20:31 codestudentcodestudent 7322 silver badges88 bronze badges 1

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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

You should use your function:

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

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

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>

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.

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>

本文标签： How can I print the return value of a JavaScript function in HTMLStack Overflow