如何在HTML中打印JavaScript函数的返回值？

Question

我正在创建一个代码，用户可以在其中计算矩形的面积。 在提示时输入高度和宽度后，站点应在表格中打印高度，宽度和面积值。 高度和宽度代码可以正常工作并打印，但是不会打印该区域。 我要去哪里错了？

这是单独的JavaScript代码。

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

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

这是在其中编码JavaScript输出的HTML代码。

<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>

Answer 1

您应该使用函数：

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

声明一个函数的重点是稍后使用它。

Answer 2

这是因为area是calcArea方法的局部变量， document对象无权访问它。

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

请改用此代码，因为上述方法不是实际的编码方法：

 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> 

Answer 3

area变量是在函数内部声明的，因此它不在函数范围之外。

试试这个

var area = "...";

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

您的函数也永远不会被调用，因此area实际上不会被赋值。

Answer 4

您可以使用以下代码来计算值并分离JS和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>