Question

你好我添加输入，它们在将金额计入小计时起作用。但是，底部的页面总数不会随着税金和子总额的总和而更新。任何帮助都会很棒。我是javascript的新手，我确信有些东西飞过我的脑袋

<table class="table table-condensed">
<tr class="info">
<td>Subtotal</td>
<td class="total" id="tot" for="tot">
<input class='form-control' type="total" id="total" onchange="myFunction1()" readonly>

</td>
</tr>
<tr>
<td>Tax</td>
<td class="taxtot" id="taxtot" for="taxtot">
<input class='form-control' type="taxt" id="taxtot" readonly>

</td>
</tr>
<tr class="info">
<td>Total Due</td>
<td class="thetot" id="thetot" for="thetot">
<input class='form-control' type="thetot" id="thetot" readonly>

</td>
</tr>
</table>


<script type="text/javascript">
function myFunction()
        {
            var answer = document.getElementById('total');
            var n = 0
            var x = document.getElementById('itemprice1');
            var y = document.getElementById('itemprice2');
            var z = document.getElementById('itemprice3');
            var w = document.getElementById('itemprice4');
            var taxt = document.getElementById('taxtot');
            var thetot = document.getElementById('thetot');
                                                                    //var d = document.getElementsById('itemprice3');

                                                                    // parseFloat converts to values, otherwise you'll concatenate the strings.
    answer.value = parseFloat("0" + x.value ) + parseFloat("0" + y.value) + parseFloat("0" + z.value) + parseFloat("0" + w.value);
    //{
        //taxt.value = parseFloat(n.value + "0");
    //thetot.value = parseFloat("0" + answer.value);
//}
     // + d.value;
}
</script>
<script type="text/javascript">
function myFunction1()
        {
        var answer = document.getElementById('total');
        var taxt = document.getElementById('taxtot');
        var thetot = document.getElementById('thetot');

        thetot.value = parseFloat("0" + answer.value) + parseFloat("0" + taxt.value);


}
</script>

Answer 1

Id属性必须是唯一的，因此从td元素中删除id（您不需要它）并仅将其保留在输入元素上。

代码：

<table class="table table-condensed">
    <tr class="info">
        <td>Subtotal</td>
        <td class="total" for="tot">
            <input class='form-control' type="total" id="total" onchange="myFunction1()" />
        </td>
    </tr>
    <tr>
        <td>Tax</td>
        <td class="taxtot" for="taxtot">
            <input class='form-control' type="taxt" id="taxtot" />
        </td>
    </tr>
    <tr class="info">
        <td>Total Due</td>
        <td class="thetot" for="thetot">
            <input class='form-control' type="thetot" id="thetot" readonly>
        </td>
    </tr>
</table>

演示：http://jsfiddle.net/IrvinDominin/S2AP6/

Answer 2

您的代码中有许多错误..

您的输入类型不存在。

您有2个具有相同ID的元素... taxtot

<td class="taxtot" id="taxtot" for="taxtot">
<input class='form-control' type="taxt" id="taxtot" readonly>
//AND
<td class="thetot" id="thetot" for="thetot">
<input class='form-control' type="thetot" id="thetot" readonly>

当你undefined执行带有此ID的第一个元素，即document.getElementById('taxtot').value元素时，会给td。并且不会更新Total的值，因为它适用于td元素。

为什么在输入字段onchange时放置readonly？

进行全面更新的最佳方法是将该功能纳入税收：

<td class="taxtot" id="taxtot" for="taxtot">
<input class='form-control' type="text" id="tax" onblur="myFunction1()" readonly>

javascript只填充第一个输入而不是第二个

2 个答案: