创建一个使用javascript操作innerHTML的简单计算器

Creating a simple calculator that manipulates innerHTML using javascript

本文关键字：操作 javascript innerHTML 计算器 简单 一个 创建      更新时间：2023-09-26

我正在尝试为飞机制作一个简单的重量和平衡计算器。要求很简单，我需要输入一个权重，并更新一个力矩字段，以包含权重乘以已知的力臂。基本上，我只需要将输入乘以一个已知值，并将该乘积打印到另一个空格中。

下面是我到目前为止所尝试的，它应该是工作的:

  1. 在onchange事件中使用this.value传递输入对话框的值

  2. 使用document.getElementById(outID)

    3. 查找输出元素

  3. 使用outID.innerHTML = weight*arm

    4. 设置输出元素文本

然而，什么也没发生。

<!DOCTYPE html>
<head>
    <script language="javascript" type="text/javascript">
        function GetMoment(outID,weight,arm){
            var outputObj = document.getElementById( outID );
            outputObj.innerHTML = weight*arm;
        }
    </script>
</head>
<html>
<body>
<div id="InputForm" style="width:600;float:left;">
<table name="WeightAndBalance" border=4>
    <tr>
        <th>Front Seats</th>
        <th> <input id="FrontWeight" type="text" name="FrontWeight" onchange="javascript:GetMoment(FrontMoment,this.value,85.5)"> </th>
        <th>85.5 in</th>
        <th> <span id="FrontMoment" type="text" name="FrontMoment" style="width:50px">Front Seat Moment</span></th>
    </tr>
        <tr>
        <th>Rear Seats</th>
        <th> <input id="RearWeight" type="text" name="RearWeight" onchange="javascript:GetMoment(RearMoment,this.value,117)"> </th>
        <th>117 in</th>
        <th> <span id="RearMoment" type="text" name="RearMoment">Rear Seat Moment</span></th>
    </tr>
</table>
</div>
</body>
</html>

变化:

GetMoment(RearMoment,this.value,117)

到这个形式:

GetMoment('RearMoment',this.value,117)

出现的位置。id是一个字符串。

此外，javascript:是相当老派的-不需要它。它可以像这样:

<input id="RearWeight" type="text" name="RearWeight" onchange="GetMoment('RearMoment',this.value,117)">
相关文章：