Max Njoroge Max Njoroge - 6 months ago 15
HTML Question

Calculator Not Working in other browsers

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

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.

Comments