IE Javascript Werte nicht aktualisiert

Question

Ich habe eine HTML-Bereichssteuerung, die JavaScript verwendet, übergibt Werte zurück an eine HTML-Klasse.

Bitte beachten Sie die folgenden Code:

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)))); 
        }); 

       }); 

Der Code funktioniert auf Rand, Safari und Firefox. Aber auf IE die Total4-Feld-Updates, aber die Usercount4 und Servercount4 Felder nicht.

Eine Arbeits Demo hier zu sehen ist (der Code aus dem letzten Satz von Bereich Steuerelemente auf der Seite)

www.yellowsand.co.uk/#telephony

Jede Hilfe sehr geschätzt.

Answer 1

Versuchen Sie das mal:

    $(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))); 
        }); 

       }); 

Die Variable count4 wird nicht verwendet.

Sie sollten wirklich überdenken, Ihren Code zu refactoring!