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

【问题标题】：Multiplying two variables and inserting total into input JavaScript on.click command将两个变量相乘并将总计插入输入 JavaScript on.click 命令
【发布时间】：2016-12-08 08:30:37
【问题描述】：

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

【问题讨论】：

JAVA != JAVASCRIPT

标签： javascript input

【解决方案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>

【讨论】：

感谢您的帮助！

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

所以在你的情况下，它应该是：从按钮中删除总数作为 id。现在您只有一个具有唯一 ID 'total' 的元素 document.getElementById("txtArea").value = 结果；

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

你可以写return myResult，然后calculateArea函数会返回myResult。

此外，“id”用于唯一元素 - 将“class”用于多个元素。

【讨论】：