重置InnerHTML

Question

我一直在查看过去有关此问题的提交，但未能找到似乎有用的解决方案。

我有一个简单的表单来计算然后递增一个值。 innerHTML输出（“YourAmount”）在第一次提交表单时工作正常。但是，如果我以另一个数量重新提交表单，则原始输出会使用新计算结果闪烁旧计算结果。如何重置innerHTML输出？

谢谢！

// function for formatting numbers in currency format
function CurrencyFormatted(amount) {
  var i = parseFloat(amount);
  if (isNaN(i)) {
    i = 0.00;
  }
  var minus = '';
  if (i < 0) {
    minus = '-';
  }
  i = Math.abs(i);
  i = parseInt((i + .005) * 100);
  i = i / 100;
  s = new String(i);
  if (s.indexOf('.') < 0) {
    s += '.00';
  }
  if (s.indexOf('.') == (s.length - 2)) {
    s += '0';
  }
  s = minus + s;
  s = CommaFormatted(s)
  return s;
}

// function for formatting numbers with embedded commas
function CommaFormatted(amount) {
  var delimiter = ","; // replace comma if desired
  var a = amount.split('.', 2)
  var d = a[1];
  var i = parseInt(a[0]);
  if (isNaN(i)) {
    return '';
  }
  var minus = '';
  if (i < 0) {
    minus = '-';
  }
  i = Math.abs(i);
  var n = new String(i);
  var a = [];
  while (n.length > 3) {
    var nn = n.substr(n.length - 3);
    a.unshift(nn);
    n = n.substr(0, n.length - 3);
  }
  if (n.length > 0) {
    a.unshift(n);
  }
  n = a.join(delimiter);
  if (d.length < 1) {
    amount = n;
  } else {
    amount = n + '.' + d;
  }
  amount = minus + amount;
  return amount;
}

function calculate() {
  var NumStores = document.getElementById('NumStores').value;
  var result = document.getElementById('result');
  var baseProfit = NumStores * 50.00;
  result.value = baseProfit;
  var baseProfitOverYear = baseProfit * 360; // base profit (stores x cost) over 360 days
  var result2 = document.getElementById('result2');
  result2.value = baseProfitOverYear;



  var amount = baseProfitOverYear; // load from server
  var delay = 1000; // milliseconds    
  var incAmount = 20; // change to the amount by which you wish to increment
  var tId = setInterval(function() {
    document.getElementById("YourAmount").innerHTML = "$" + CurrencyFormatted(amount += incAmount);
  }, delay)

}

// disable enter key
$(document).keypress(
  function(event) {
    if (event.which == '13') {
      event.preventDefault();
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="thisForm">
  <input id="NumStores" type="number" required />
  <input type="button" onClick="calculate()" value="Calculate">
</form>
<br><br>
<p id="YourAmount">Your Amount Is 0</p>

Answer 1

首先，您应该在段落标记中创建一个span标记来保存该值。然后确保一次只发生一个间隔。

// Document elements and variables
var numStores = document.getElementById('num-stores'),
    result = document.getElementById('result-1'),
    result2 = document.getElementById('result-2'),
    yourAmount = document.getElementById('your-amount'),
    intervalId = null; // We need to rember this...

// Constants
var profitMargin = 50.00,
    numberOfDays = 360,
    incAmount = 20, // change to the amount by which you wish to increment
    timerDelay = 1000; // milliseconds    

function calculate() {
  var inputValue = numStores.value;
  var baseProfit = inputValue * profitMargin;
  var baseProfitOverYear = baseProfit * numberOfDays; // base profit (stores x cost) over 360 days
  var amount = baseProfitOverYear; // load from server

  result.value = baseProfit;
  result2.value = baseProfitOverYear;

  clearInterval(intervalId); // Clear the GLOBAL interval, before we start a new one.
  intervalId = setInterval(function() {
    yourAmount.innerHTML = "$" + CurrencyFormatted(amount += incAmount);
  }, timerDelay);
}

// Disable enter key
$(document).keypress(function(event) {
  if (event.which == '13') {
    event.preventDefault();
  }
});

// function for formatting numbers in currency format
function CurrencyFormatted(amount) {
  var i = parseFloat(amount);
  if (isNaN(i)) {
    i = 0.00;
  }
  var minus = '';
  if (i < 0) {
    minus = '-';
  }
  i = Math.abs(i);
  i = parseInt((i + .005) * 100);
  i = i / 100;
  s = new String(i);
  if (s.indexOf('.') < 0) {
    s += '.00';
  }
  if (s.indexOf('.') == (s.length - 2)) {
    s += '0';
  }
  s = minus + s;
  s = CommaFormatted(s)
  return s;
}

// function for formatting numbers with embedded commas
function CommaFormatted(amount) {
  var delimiter = ","; // replace comma if desired
  var a = amount.split('.', 2)
  var d = a[1];
  var i = parseInt(a[0]);
  if (isNaN(i)) {
    return '';
  }
  var minus = '';
  if (i < 0) {
    minus = '-';
  }
  i = Math.abs(i);
  var n = new String(i);
  var a = [];
  while (n.length > 3) {
    var nn = n.substr(n.length - 3);
    a.unshift(nn);
    n = n.substr(0, n.length - 3);
  }
  if (n.length > 0) {
    a.unshift(n);
  }
  n = a.join(delimiter);
  if (d.length < 1) {
    amount = n;
  } else {
    amount = n + '.' + d;
  }
  amount = minus + amount;
  return amount;
}

label { font-weight: bold; }
.input-field { display: block; }
.input-field label { display: inline-block; width: 7.667em;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="this-form">
  <label>Number of Stores</label> <input id="num-stores" type="number" required />
  <input type="button" onClick="calculate()" value="Calculate">
</form>
<br>
<p>Your amount is: <span id="your-amount">$0.00</span></p>

<div class="input-field"><label>Base Profit</label> <input type="text" id="result-1" /></div>
<div class="input-field"><label>Annual Profit</label> <input type="text" id="result-2" /></div>