Calculator Not Working in other browsers

Question

I have a calculator function that works well in chrome but not in other browsers (edge,firefox,explorer,opera). Can anyone tell me what's 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(); 

I am building a table for a ticket purchasing website

Answer 1

For some reason oninput is not fired in edge browser.

To fix it, you can add calculate function to end of click handler, so you will recalculate the sum after click.

Your code become:

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

And you can remove oninput from your HTML elements.

Here you have a working fiddle.

Answer 2

At least for FireFox, it is enough to change:

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

To:

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

And it works. The button is not even necessary then.