in my WordPress site i created java bootstrap loan calculator its working perfectly on desktop but when i use mobile chrome its not working. i tried with wp-coder plugin and try with manually adding this. in chrome dev tools mobile view its working fine with the real devise this issue occured.is there any way to resolve this issue i much appreciate you help to resolve this issue
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"
/>
<div class="columns is-12-tablet is-6-desktop is-3-widescreen" style="height: 500px; width:100% " >
<div class="column w-50 p-3 " >
<div class="card w-50 p-3">
<div class="card-content w-50 p-3">
<form id="loan-form">
<div class="level w-50 p-3">
<div class="level-left is-marginless w-50 p-3s">
<div class="level-item">
<p class="number">1</p>
<p> Loan Amount </p>
<p id="yearssliderfuc"> </p>
</div>
</div>
</div>
<input id="amount" type="range" min="20000" max="200000" step="10000" onchange="yrthslide();computeResults()" />
<div class="level">
<div class="level-left is-marginless">
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<div class="control has-icons-right">
<span class="icon is-small is-right">
</span>
</div>
</div>
</div>
</div>
</div>
<div class="level">
<!-- Left side -->
<div class="level-left is-marginless">
<div class="level-item">
<p class="number">2</p>
<p> Number Of Days </p>
<p id="monthssliderfuc"> </p>
</div>
</div>
</div>
<input id="years" min="30" max="120" step="30" type="range" onchange="monthslide();computeResults()" />
<div class="control">
<br>
</div>
</form>
</div>
</div>
<div >
<div class="notification is-link has-text">
<p id="totalPayment" class="title ">LKR</p>
<p class="subtitle is-4">Total Amount</p>
</div>
</div>
<div >
</div>
</div>
<script >
function computeResults(e) {
// UI
const UIamount = document.getElementById("amount").value;
/* var UIinterest = 50
if(UIamount> 50){
var UIinterest = 50
}*/
if(UIamount<50000){
var UIinterest = 16/100;
}else if(UIamount>50000 && amount<90000){
UIinterest = 18/100;
}else if(UIamount>100000 && amount<140000){
UIinterest = 20/100;
}else{
UIinterest = 22/100
}
const UIyears = document.getElementById("years").value;
var interestperday = (UIamount * UIinterest)/365;
console.log(interestperday);
console.log("interest per day");
const monthly = parseFloat(interestperday);
const monthlyPayment = monthly.toFixed(2);
var interest = interestperday*UIyears;
const interestfinalee = parseFloat(interest);
console.log(interestfinalee);
console.log("interest all time");
var ProFees = (UIamount*10)/100;
const ProFeesfin = parseFloat(ProFees);
console.log(ProFeesfin);
console.log("ProFees");
var DocHFees = (UIamount*5)/100;
const DocHFeesfin = parseFloat(DocHFees);
console.log(DocHFeesfin);
console.log("DocHFees");
var TransFee = (UIamount*5)/100;
const TransFeefin = parseFloat(TransFee);
console.log(TransFeefin);
console.log("TransFee");
const UIamountfin = parseFloat(UIamount);
// Calculating total payment
const all = TransFeefin + DocHFeesfin + ProFeesfin + interestfinalee + UIamountfin
console.log(all);
console.log("allallallallallallallallallallallallallall");
///*****************************************************
const totalPayment = all.toFixed(2);
document.getElementById("totalPayment").innerHTML = "LKR " + totalPayment;
e.preventDefault();
}
function monthslide(){
var Monthslider = document.getElementById("years").value
document.getElementById("monthssliderfuc").innerHTML = Monthslider;
}
function yrthslide(){
var Monthslider = document.getElementById("amount").value
document.getElementById("yearssliderfuc").innerHTML = Monthslider;
}
</script>
2
Answers
problem resolved. its because of same function name for mobile view and desktop view after changing the function names its resolved
You are using the "computeResults()" function, but "computeResults()" function is not defined and the "Calculate()" function is not being used.
Update: Add other details, after the code has been updated:
e.preventDefault()
function is not defined and that generates the issue, I removed that and it already works in mobile.