javascript - 如何使用 HTML 计算三 Angular 形的面积

Question

我正在尝试创建一个带有两个框的表格，您可以在其中输入三 Angular 形的高度和底边，然后您可以在底部得到结果区域，这是我到目前为止对于其他形状得到的结果。但我无法弄清楚三 Angular 形。我是新来的，所以提前抱歉。

    <h3>Calculo de Areas</h3>
        <p>Ingrese la Informacion requerida para sacar el Area de las siguientes Figuras.</p>
        <p>Nota:Los Resultados estan dados en la misma unidad que se introduce.</p>
            <table>
        <tr>
            <th>
<p>
  <label>Radio de un Circulo</label>
  <input id="inputradio" type="number" placeholder="Radio" oninput="LengthConverter9(this.value)" onchange="LengthConverter9(this.value)">
</p>
<p>Area: <span id="outputArea"></span></p>

<script>    
function LengthConverter9(valNum9) {
  document.getElementById("outputArea").innerHTML=(valNum9*valNum9)*3.14159265359;
}
                </script>
            </th><th>
<p>
  <label>Lado de un Cuadrado</label>
  <input id="inputLado" type="number" placeholder="Largo" oninput="LengthConverter10(this.value)" onchange="LengthConverter10(this.value)">
</p>
<p>Area: <span id="outputArea1"></span></p>

<script>
function LengthConverter10(valNum10) {
  document.getElementById("outputArea1").innerHTML=(valNum10*valNum10);
}
</script>

    <tr><th>
        <p>
  <label>Base de un Triangulo Rectangulo</label>
  <input id="inputBase" type="number" placeholder="Ancho" oninput="LengthConverter11(this.value)" onchange="LengthConverter11(this.value)">
</p>
        <p>
  <label>Altura de dicho Triangulo</label>
  <input id="inputAltura" type="number" placeholder="Alto" oninput="LengthConverter12(this.value)" onchange="LengthConverter12(this.value)">
</p>
<p>Area: <span id="outputArea4"></span></p>
<script>    
function LengthConverter11(valNum11){
  document.getElementById("outputMetros4").innerHTML=(LengthConverter11*LengthConverter12)/2;
}
                </script>


        </th></tr>
    </table>

我唯一无法工作的是三 Angular 形的，提前谢谢。

Answer 1

看这个

  <input id="inputAltura" type="number" placeholder="Alto" oninput="LengthConverter12(this.value)" onchange="LengthConverter12(this.value)">

您尚未为LengthConverter12定义任何函数

看这个(计算三 Angular 形的面积)

document.getElementById("outputMetros4").innerHTML=(LengthConverter11*LengthConverter12)/2;

您正在乘以由未定义函数定义的函数吗？

我建议你把所有的js代码放在一个section中，这样很容易调试和阅读。但是，使用您的布局并在您拥有的基础上进行构建，下面是一个片段

<h3>Calculo de Areas</h3>
<p>Ingrese la Informacion requerida para sacar el Area de las siguientes Figuras.</p>
<p>Nota:Los Resultados estan dados en la misma unidad que se introduce.</p>
<table>
  <tr>
    <th>
      <p>
        <label>Radio de un Circulo</label>
        <input id="inputradio" type="number" placeholder="Radio" oninput="LengthConverter9(this.value)" onchange="LengthConverter9(this.value)">
      </p>
      <p>Area: <span id="outputArea"></span></p>

      <script>
        function LengthConverter9(valNum9) {
          document.getElementById("outputArea").innerHTML = (valNum9 * valNum9) * 3.14159265359;
        }
      </script>
    </th>
    <th>
      <p>
        <label>Lado de un Cuadrado</label>
        <input id="inputLado" type="number" placeholder="Largo" oninput="LengthConverter10(this.value)" onchange="LengthConverter10(this.value)">
      </p>
      <p>Area: <span id="outputArea1"></span></p>

      <script>
        function LengthConverter10(valNum10) {
          document.getElementById("outputArea1").innerHTML = (valNum10 * valNum10);
        }
      </script>

      <tr>
        <th>
          <p>
            <label>Base de un Triangulo Rectangulo</label>
            <input id="inputBase" type="number" placeholder="Ancho">
          </p>
          <p>
            <label>Altura de dicho Triangulo</label>
            <input id="inputAltura" type="number" placeholder="Alto" oninput="LengthConverter11(this.value)" onchange="LengthConverter11(this.value)">
          </p>
          <p>Area: <span id="outputArea4"></span></p>
          <script>
            function LengthConverter11(height) {
              var base = document.getElementById("inputBase").value.trim();
              console.log(base, height);
              height = height.trim();

              document.getElementById("outputArea4").innerHTML = (base * height) / 2;
            }
          </script>


        </th>
      </tr>
</table>