Question posted in 
I have 4 calculations that I have set up to spit out results when an integer 1-100 is typed into the input. right now, the values automatically update as I am typing, but I want them to wait until the calculate button is clicked. I can’t seem to figure out what I did wrong, or what I am missing.
let phoneOutput = document.getElementById("rc-phone");
let carOutput = document.getElementById("rc-car");
let trashOutput = document.getElementById("rc-trash");
let monthlyCost = document.getElementById("monthly-cost");
let input = document.getElementById("customPercent");
let ggrResults = document.querySelector("#customPercent");
ggrResults.addEventListener('input', e => adjustData(e.target.value)) // had to add in .value in order to extract the text from the input
const adjustData = (a) => {
// convert value from input text to number in order to calculate
const numberConvert = Number(a);
const decimal = numberConvert/100;
const monthlyCostFormula = (8000 * decimal) * (.026/12);
const trashBagFormula = 243 * decimal;
const milesDrivenFormula = 14294 * decimal;
const phonesChargedFormula = 368949 * decimal;
monthlyCost.innerHTML = monthlyCostFormula.toFixed(2);
trashOutput.innerHTML = Math.round(trashBagFormula);
carOutput.innerHTML = Math.round(milesDrivenFormula);
phoneOutput.innerHTML = Math.round(phonesChargedFormula);
}<form method="post">
<input id="customPercent" type="text" placeholder="custom" />
<button type="submit" onclick="return(adjustData());" id="submit">Calculate</button>
</form>
<div>
<h6>Equal to Removing</h6>
<span style="font-size: 28px; font-weight: bold; font-family: sans-serif;" id="rc-trash">100</span><br>
<span class="green-text small-txt">Trash Bags of Waste from the Environment</span>
</div>
<div>
<h6>Equal to offsetting</h6>
<span style="font-size: 28px; font-weight: bold; font-family: sans-serif;" id="rc-car">20</span><br>
<span class="green-text small-txt">Gas-Powered Miles Driven</span>
</div>
<div>
<h6>Equal to offsetting</h6>
<span style="font-size: 28px; font-weight: bold; font-family: sans-serif;" id="rc-phone">500</span><br>
<span class="green-text small-txt">Smartphones Charged</span>
</div>
<div>
<h4 class="heading-4">Estimated Monthly Cost <a href="#" data-toggle="tooltip" title="This will have an explanation"><i class="fa fa-info-circle gray"></i></a></h4>
<span style="font-size: 28px; font-weight: bold; font-family: sans-serif;">$<span id="monthly-cost">15.00</span></span>
<h5>per month</h5>
</div>
3
Answers
Did you mean something like this? Without the event listener and firing calculation only on click?
If I understand it right:
<form method="post" action="#" onsubmit="return false">To prevent page refresh/redirection: "#" is a empty anchor and "return false" is a js soltution.
ggrResults.addEventListener('input', e => adjustData(e.target.value))Quoted out.
<button type="submit" onclick="adjustData(document.getElementById('customPercent').value)";" id="submit">Calculate</button>onclick calls the function and pass the value by get the input object’s value by the id "customPercent".
something like that ?