Max Njoroge - 1 year ago 89
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="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"><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;
}

I am building a table for a ticket purchasing website

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download