javascript help using html and calculator

问题

Can someone help me to get the total price of the stock given prices below?? Using the onclick, once someone puts in the number of stocks they want to buy, how do I go about getting the total price of all 3 stocks choosen??

    <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

回答1:

I would suggest storing the price information as a numeric value somewhere, like in hidden input fields or data- attributes on the table cells, and create IDs on those elements that you can associate with the inputs for stock purchases. Then it's just a matter of doing some simple math. Here's an example using hidden inputs:

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

Here's the code for putting the total into a textbox. This would go at the end of your form and replace the <script> block from the first example.

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

来源：https://stackoverflow.com/questions/29037916/javascript-help-using-html-and-calculator

标签

javascript

html

onclick

calculator