Calculator not working on mobile
The embedded calculator is only working on pc and not on mobile.
The website where the calculator is:
https://www.freetrial.automatedsystems.net/
I already tried to have chatgpt fix the problem, but it didn't work. Any ideas on how to get it to work on mobile?
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
<title>ROI Calculator</title>
<div id="roi-calculator-container">
<h1>ROI Calculator</h1>
<form id="roi-calculator">
<label for="client-value">Average Client Value:</label>
<input type="number" id="client-value" required="">
<br>
<label for="missed-calls">Missed Calls per Month:</label>
<input type="number" id="missed-calls" required="">
<br>
<label for="close-rate">Average Close Rate (%):</label>
<input type="number" id="close-rate" required="">
<br>
<button type="submit">Calculate ROI</button>
</form>
<h2>Results:</h2>
<p>Monthly $$$ Left on Table: <span id="monthly-left"></span></p>
<p>We Charge $297 / month: <span id="we-charge"></span></p>
<p>ROI: <span id="roi"></span>%</p>
</div>
more code in the comment
1 Reply
<script>
const monthlyCharge = 297; // Set the monthly charge here
document.getElementById("roi-calculator").addEventListener("submit", function (event) {
event.preventDefault();
const clientValue = parseFloat(document.getElementById("client-value").value);
const missedCalls = parseFloat(document.getElementById("missed-calls").value);
const closeRate = parseFloat(document.getElementById("close-rate").value) / 100;
const monthlyLeft = (clientValue * (missedCalls * closeRate) - monthlyCharge);
const roi = (monthlyLeft / monthlyCharge) * 100;
document.getElementById("monthly-left").textContent = monthlyLeft.toFixed(2);
document.getElementById("we-charge").textContent = monthlyCharge.toFixed(2);
document.getElementById("roi").textContent = roi.toFixed(2);
});
</script>