Question

我有两个输入宽度和高度来计算三角形的面积。当您在宽度和高度的每个输入中键入数字时，我需要一个提交按钮来乘以宽度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

两人的身份相同，总数为＆＃39;。我已将其命名为＆＃39; product＆＃39;。
total.value = myResult;也有错字错误。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您的ID为“total”的元素错误。按钮不应该，输入应该。

Answer 3

您应该按Id选择元素，然后将结果作为值分配给元素

所以在你的情况下，它应该是：从按钮中删除总计为id。现在，您只有一个元素具有唯一ID“total” document.getElementById（“txtArea”）。value = result;

Answer 4

您有两个id="total"元素。将按钮上的id属性更改为其他内容或将其删除。
您在javascript函数的最后一行中大写myResult。套管在javascript中很重要。

Answer 5

您可以编写return myResult，然后calculateArea函数将返回myResult。

此外，＆＃34; id＆＃34;用于独特元素 - 使用＆＃34; class＆＃34;对于多个元素。

将两个变量相乘并将总数插入到输入JavaScript on.click命令中

5 个答案: