計算器在其他瀏覽器中不起作用

Question

我有一個計算器功能，該功能在chrome瀏覽器中效果很好，但在其他瀏覽器（edge，firefox，explorer，opera）中卻無法使用。 誰能告訴我怎么了。

 <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

由於某些原因，在邊緣瀏覽器中不會觸發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 。

在這里，您正在工作的小提琴。

Answer 2

至少對於FireFox而言，更改就足夠了：

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

至：

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

而且有效。 那時甚至不需要按鈕。