calculate the input value and update 3 results when click calculate button with JavaScript

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>

Solution

Did you mean something like this? Without the event listener and firing calculation only on click?

const adjustData = () => {
const input = document.getElementById("customPercent");
const phoneOutput = document.getElementById("rc-phone");
const carOutput = document.getElementById("rc-car");
const trashOutput = document.getElementById("rc-trash");
const monthlyCost = document.getElementById("monthly-cost");
const ggrResults = document.querySelector("#customPercent");

  // convert value from input text to number in order to calculate
  const numberConvert = Number(input.value);
  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="button" onclick="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>