Rechner funktioniert nicht in anderen Browsern

Question

Ich habe eine Taschenrechnerfunktion, die gut in Chrome funktioniert, aber nicht in anderen Browsern (Edge, Firefox, Explorer, Opera). Kann mir jemand sagen, was wrong.Thanks

<div class="content ticket_wrapper"> 
 
    <div class="table"> 
 
    <div class="row header"> 
 
     <div class="cell">Ticket</div> 
 
     <div class="cell"><div class="align"> Price</div></div> 
 
     <div class="cell"><div class="align"> Qnty</div></div> 
 
     <div class="cell">Total</div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="cell">Normal</div> 
 
     <div class="cell"><div class="align"> KSH 650</div></div> 
 
     <div class="cell"> 
 
      <div class="ticket"> 
 
      <select oninput="calculate()" id="titotal" class="titotal"> 
 
       <option value="0">0</option> 
 
       <option value="1">1</option> 
 
       <option value="2">2</option> 
 
       <option value="3">3</option> 
 
      </select> 
 
      </div> 
 
     </div> 
 
     <div class="cell"> 
 
     <span id="result"></span> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="cell">Advanced</div> 
 
     <div class="cell"><div class="align"> KSH 950</div></div> 
 
     <div class="cell"> 
 
      <div class="ticket"> 
 
      <select oninput="calculate()" id="titotal_2" class="titotal"> 
 
       <option value="0">0</option> 
 
       <option value="1">1</option> 
 
       <option value="2">2</option> 
 
       <option value="3">3</option> 
 
      </select> 
 
      </div> 
 
     </div> 
 
     <div class="cell"> 
 
     <span id="result2"></span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="table_tots"> 
 
    <div class="row grand_total"> 
 
     <div class="cell"> 
 
      Sub Total : 
 
      <span id="grand_total"></span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="sub"> 
 
    <input class="submit" type="button" value="Proceed"> 
 
    </div> 
 
</div>

$('#sub').hide(); 
 
    $('.titotal').on('click', function(event){ 
 
     var one = $('#titotal').val(); 
 
     var two = $('#titotal_2').val(); 
 
     if (one>0 || two>0) { 
 
      $('#sub').show(); 
 
     }else{ 
 
      $('#sub').hide(); 
 
     } 
 
    }); 
 

 
    function calculate(){ 
 
     var mybox1 = document.getElementById('titotal').value; 
 
     var mybox2 = document.getElementById('titotal_2').value; 
 
     var myresult = mybox1 * 650; 
 
     var myresult2 = mybox2 * 950; 
 
     var total = myresult + myresult2; 
 
     document.getElementById("result").innerHTML = myresult; 
 
     document.getElementById("result2").innerHTML = myresult2; 
 
     document.getElementById("grand_total").innerHTML = total; 
 
     } 
 
    window.onload = calculate();

, das ich für ein Ticket-Kauf Website einen Tisch am Bau

Answer 1

Zumindest für FireFox, ist es genug zu ändern:

<select oninput="calculate()" id="titotal" class="titotal"> 

An:

<select onchange="calculate()" id="titotal" class="titotal"> 

Und es funktioniert. Der Knopf ist dann nicht einmal nötig.

Answer 2

Aus irgendeinem Grund oninput ist nicht im Edge-Browser gefeuert.

Um es zu beheben, können Sie berechnen, Funktion bis Ende click Handler, , so dass Sie die Summe nach dem Klick neu berechnen.

Ihr Code werden:

$('.titotal').on('click', function(event){ 
     var one = $('#titotal').val(); 
     var two = $('#titotal_2').val(); 
     if (one>0 || two>0) { 
      $('#sub').show(); 
     }else{ 
      $('#sub').hide(); 
     } 

     calculate(); 
    }); 

Und Sie können oninput von Ihren HTML-Elemente entfernen.

Here Sie haben eine funktionierende Geige.