使用JavaScript点击计算按钮时计算输入值并更新3个结果

Question

我设置了 4 个计算，以便在输入中输入整数 1-100 时输出结果。现在，这些值会在我输入时自动更新，但我希望它们等到单击计算按钮为止。我似乎无法弄清楚我做错了什么，或者我错过了什么。

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>

Answer 1

你的意思是这样的吗？没有事件侦听器并且仅在单击时触发计算？

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");

const adjustData = () => {
  // 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="submit" 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>