计算器不能在其他浏览器中工作

Question

我有一个计算器功能，在Chrome浏览器中运行良好，但在其他浏览器（边缘，firefox，资源管理器，歌剧）中不起作用。谁能告诉我什么是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();

我建立一个表，一个购票网站

Answer 1

至少对于Firefox，它是足以改变：

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

要：

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

和它的作品。那个按钮甚至不是必需的。

Answer 2

出于某种原因oninput不在边缘浏览器中解雇。

要修复它，您可以将计算函数添加到处理程序click的末尾，因此您将在点击后重新计算总和。

您的代码变成：

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

你可以删除从HTML元素oninput。

Here你有一个工作小提琴。