javascript 帮助使用 html 和计算器

Question

有人可以帮我在给定以下价格的情况下获得股票的总价格吗？使用 onclick，一旦有人输入了他们想要购买的股票数量，我该如何获得所有 3 只股票的总价格？？

    <tr>
        <td><b> SHARE PRICE</b></td>
        <td>$43.93</td>
        <td>$43.87</td>
        <td>$26.33</td>
    </tr>
</table> 
<hr>
<br>
<p>
<h3>Important information that you should know about these stocks: </h3>
<ul>
    <li>0.1% of the trade value if the total trade value is less than $10,000</li>
    <li>0.08% of the trade value if the total trade value is greater than or equal to $10,000</li>
    <li>The minimum commission is $5</li>
    <hr>
    <br>
</ul>  

<form name="calculator">

<p> Enter the number of Oracle Corporation stocks you wish to purchase!: <input type="text" id="input1"></p> <br>
<p> Enter the number of Microsoft Corporation stocks you wish to purchase!: <input type="text" id="input2"></p> <br>
<p> Enter the number of Symantec Corporation stocks you wish to purchase!: <input type="text" id="input3"></p> <br

Answer 1

---

我建议将价格信息作为数值存储在某处，例如隐藏的输入字段或表格单元格上的data- 属性，并在这些元素上创建 ID，以便与股票购买的输入相关联。然后只需做一些简单的数学运算即可。这是一个使用隐藏输入的示例：

<table>
    <tr>
        <td><b> SHARE PRICE</b></td>
        <td>$43.93</td>
        <td>$43.87</td>
        <td>$26.33</td>
    </tr>
</table>
<h3>Important information that you should know about these stocks: </h3>
<ul>
    <li>0.1% of the trade value if the total trade value is less than $10,000</li>
    <li>0.08% of the trade value if the total trade value is greater than or equal to $10,000</li>
    <li>The minimum commission is $5</li>
</ul>

<form name="calculator">
    <input type="hidden" id="price1" value="43.93" />
    <input type="hidden" id="price2" value="43.87" />
    <input type="hidden" id="price3" value="26.33" />
    <p> Enter the number of Oracle Corporation stocks you wish to purchase!: <input type="text" id="input1"></p> <br>
    <p> Enter the number of Microsoft Corporation stocks you wish to purchase!: <input type="text" id="input2"></p> <br>
    <p> Enter the number of Symantec Corporation stocks you wish to purchase!: <input type="text" id="input3"></p> <br>
    <input type="button" value="Add!" onclick="javascript:sumUp()" />
</form>

<script type="text/javascript">
    function sumUp() {
        var total = (document.getElementById("price1").value * document.getElementById("input1").value) + (document.getElementById("price2").value * document.getElementById("input2").value) + (document.getElementById("price3").value * document.getElementById("input3").value)
        alert("Your total is: $" + total);
    }
</script>

这是将总数放入文本框中的代码。这将在您的表单末尾并替换第一个示例中的 <script> 块。

<p>Your total is: $<input type="text" id="total" /></p>

<script type="text/javascript">
    function sumUp() {
        var total = (document.getElementById("price1").value * document.getElementById("input1").value) + (document.getElementById("price2").value * document.getElementById("input2").value) + (document.getElementById("price3").value * document.getElementById("input3").value)
        document.getElementById("total").value = total;
    }
</script>