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

这是HTML代码，其中对JavaScript的输出进行了编码。

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

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

4 个答案: