javascript - IE Javascript 值未更新

Question

我有一个 HTML 范围控件，它使用 javascript 将值传递回 HTML 类。

请看下面的代码:

HTML

        <div class="userbox">
                <h3> Number of Users:&nbsp;&nbsp;&nbsp;<span class="usercount4">5</span><h3>
                <input type=range min=5 max=50  value="5" step=1 id=usercount4></input>
        </div>

        <div class="serverbox">     
                <h3> Number of Channels:&nbsp;&nbsp;&nbsp;<span class="servercount4">&nbsp;1</span><h3>
                <input type=range min=5 max=150  value="5" step=5 id=servercount4></input>                                                      
        </div>

        <div class="totalbox">  
                <h3>Total:&nbsp;&nbsp;&nbsp;<h3>
                <span class="total4">£30</span><p style="display: inline"> &nbsp;&nbsp;/ month</p>
        </div> 

JavaScript

                    $(document).ready(function() {

                    var total4;
                    var count4 = $('#usercount4').val();
                    var addToTotal4 = function(){
                        total4 += parseFloat(this.value, 10);
                    };

                    var compute4 = function() {
                        total4 = 0;
                        $('.option4:checked ,#servercount4 ,#usercount4').each(addToTotal4);
                        $('.total4').text('£' + (total4 + ($('#usercount4').val()*5)-($('#usercount4').val())).toFixed(0));             
                    };

                    $('.option4, #servercount4 , #usercount4').change(compute4);

                    $('#usercount4').on('input', function(){
                        $('.usercount4').text($('#usercount4').val());

                    });

                    $('#servercount4').on('input', function(){
                        $('.servercount4').text($('#servercount4').val()/5);
                    });

                    $('#usercount4').on('input', function(){
                    $('.total4').text('£' + (parseFloat($('#servercount4').val())+parseFloat(($('#usercount4').val()*5))));
                    });

                    $('#servercount4').on('input', function(){
                    $('.total4').text('£' + (parseFloat($('#servercount4').val())+parseFloat(($('#usercount4').val()*5))));
                    });

                });

该代码在 Edge、Safari 和 Firefox 上运行良好。但在 IE 上，total4 字段会更新，但 usercount4 和 servercount4 字段不会更新。

可以在此处查看工作演示(代码来自页面上最后一组范围控件)

www.yellowsand.co.uk/#telephony

非常感谢任何帮助。

Answer 1

尝试一下:

                    $(document).ready(function() {

                    var total4;
                    var count4 = $('#usercount4').val();
                    var addToTotal4 = function(){
                        total4 += parseFloat(this.value);
                    };

                    var compute4 = function() {
                        total4 = 0;
                        $('.option4:checked ,#servercount4 ,#usercount4').each(addToTotal4);
                        $('.total4').text('£' + (total4 + (parseFloat($('#usercount4').val())*5)-(parseFloat($('#usercount4').val()))).toFixed(0));             
                    };

                    $('.option4, #servercount4 , #usercount4').change(compute4);

                    $('#usercount4').on('input change', function(){
                        $('.usercount4').text($('#usercount4').val());

                    });

                    $('#servercount4').on('input change', function(){
                        $('.servercount4').text(parseFloat($('#servercount4').val())/5);
                    });

                    $('#usercount4').on('input change', function(){
                    $('.total4').text('£' + (parseFloat($('#servercount4').val())+parseFloat(($('#usercount4').val())*5)));
                    });

                    $('#servercount4').on('input change', function(){
                    $('.total4').text('£' + (parseFloat($('#servercount4').val())+parseFloat(($('#usercount4').val())*5)));
                    });

                });

The variable count4 is not used.

你真的应该考虑重构你的代码!