javascript - 将两个变量相乘并将总计插入输入 JavaScript on.click 命令

Question

我有两个输入宽度和高度来计算三 Angular 形的面积。当您在每个输入中输入宽度和高度的数字时，我需要一个提交按钮来乘以宽度 x 高度并将总面积插入输入中。

HTML:

<p id="instructions" class="Main">Enter the width and height of your triangle to calculate the area.</p>

<!--Main div-->
<form id="mainform">
       Width (b):
            <input type="Text" id="width" placeholder="width" >
    <div>
        Height(h):
            <input type="text" id="height" placeholder="height">
    </div>
            <button type="button" id="total" onclick="calculateArea()">Calculate Area</button>
                </form>

                <!--Divider-->
                <form>
                    <div id="divider">  
                    </div>
                    <div id="area">
                        The area is: 
                        <input type="text" name="txtarea" id="total">
                    </div>
                </form>     
        </div>

JavaScript:

    function calculateArea() {
    var width = document.getElementById('width').value; 
    var height = document.getElementById('height').value;
    var total = document.getElementById('total');
    total.value = width * height;
     }

Answer 1

• 两者都有相同的 ID“total”。我将其中一个命名为“产品”。
• total.value = myResult; 还有一个拼写错误。

 function calculateArea() {
   var width = document.getElementById('width').value;
   var height = document.getElementById('height').value;
   var total = document.getElementById('product');
   var myResult = width * height;
   total.value = myResult;
 }

<p id="instructions" class="Main">Enter the width and height of your triangle to calculate the area.</p>

<!--Main div-->
<form id="mainform">
  Width (b):
  <input type="Text" id="width" placeholder="width">
  <div>
    Height(h):
    <input type="text" id="height" placeholder="height">
  </div>
  <button type="button" id="total" onclick="calculateArea()">Calculate Area</button>
</form>

<!--Divider-->
<form>
  <div id="divider">
  </div>
  <div id="area">
    The area is:
    <input type="text" name="txtarea" id="product">
  </div>
</form>
</div>