Question

我被卡住了。想要从window字段中计算process.env.XXX字段函数Value Four执行良好，但是执行函数Fraction Value后，calculateFractionValueInPercent等于calculateInverseValue，而valFour不变。请帮忙弄清楚。谢谢

NaN

fractionValue

Answer 1

就像其他值const hasNull = arr => arr.some(item => item === null); console.log(hasNull([1, null, 3]));也必须转换为fractionValue一样。因为它是文本，所以不能直接在算术运算中使用它：

number

Answer 2

有两个问题。

更改分数值时，HTML会调用calculateFractionValueInPercent()。这导致它读取值1-4，并更新分数值，覆盖用户可能刚刚输入的内容。
calculateInverseValue()不会尝试将fractionValue读为数字。结合上一点，这意味着它总是尝试执行类似"50%"/100的操作，该操作为NaN，因为50%不能隐式地强制转换为数字。

不对百分比值变化调用calculateFractionValueInPercent()并确保对fractionValue使用parseFloat()会使表单按预期方式工作。

const calculateFractionValueInPercent = () => {

  let valOne = parseFloat(document.getElementById('valOne').value) || 0;
  let valTwo = parseFloat(document.getElementById('valTwo').value) || 0;
  let valThree = parseFloat(document.getElementById('valThree').value) || 0;
  let valFour = parseFloat(document.getElementById('valFour').value) || 0;

  let totalValue = parseFloat(((valFour / ((valOne + valTwo) - valThree)) * 100)).toFixed(2);

  document.getElementById('fractionValue').value = totalValue + "%";

};

const calculateInverseValue = () => {

  let valOne = parseFloat(document.getElementById('valOne').value) || 0;
  let valTwo = parseFloat(document.getElementById('valTwo').value) || 0;
  let valThree = parseFloat(document.getElementById('valThree').value) || 0;
  let fractionValue = parseFloat(document.getElementById('fractionValue').value) || 0;

  let totalInverseValue = parseFloat(((valOne + valTwo) - valThree) * (fractionValue / 100)).toFixed(2);

  document.getElementById('valFour').value = totalInverseValue;

}

<label>Value One</label>
<input type="text" id="valOne">
<br>
<label>Value Two</label>
<input type="text" id="valTwo">
<br>
<label>Value Three</label>
<input type="text" id="valThree">
<br>
<label>Value Four</label>
<input type="text" id="valFour" onchange="calculateFractionValueInPercent()">
<br>
<label>Fraction, % </label>
<input type="text" id="fractionValue" onchange="calculateInverseValue()">

根据输入字段进行逆计算

2 个答案: