将文本输入中的值格式化为货币-解网

问：

我制作了一个小计算器，我希望在只读输入文本中以货币格式显示总和。由于我是 javascript 的新手（和这个论坛），我无法让它工作。以为我下面的代码会起作用。谁能给我一些关于如何让它工作的指示？

<h2>Calculator/h2>

<input
  type="text"
  id="number1"
  value="0"
  onchange="summa.value = (number1.value*1) + (number2.value*1)"
/>

<br>

<input
  type="text"
  id="number2"
  value="0"
  onchange="summa.value = (number1.value*1) + (number2.value*1)"
/>

<br/><br/>

<input
  type="text"
  readonly="readonly"
  id="summa"
  value="0"
  onchange="this.value.toLocaleString("sv-SE", {
    style:"currency", 
    currency:"SEK",
    currencyDisplay:"symbol",
    maximumFractionDigits: 0
  });"
/>

JavaScript 输入文本货币

下面是一个抽象为 html 和单独脚本的逻辑的最小示例。输入已更改为 type=“number”，以避免输入非数字值。然后，该脚本使用 getElementById 查询三个输入，并使用 addEventListener 将侦听器附加到两个接受输入的输入。最后，声明了一个函数，用于使用格式化值更新第三个输入的值。change

const number1 = document.getElementById('number1');
const number2 = document.getElementById('number2');
const summa = document.getElementById('summa');

function updateTotal() {
  const total = Number(number1.value) + Number(number2.value);
  summa.value = total.toLocaleString('sv-SE', {
    style: 'currency',
    currency: 'SEK',
    currencyDisplay: 'symbol',
    maximumFractionDigits: 0,
  });
}

number1.addEventListener('change', updateTotal);
number2.addEventListener('change', updateTotal);

<h2>Calculator</h2>

<input type="number" id="number1" value="0"/>
<br />
<input type="number" id="number2" value="0" />
<br />
<input type="text"  id="summa" readonly="true" value="0"/>

注意：将字符串强制转换为数字的方法有效，但有更透明的方法。在这里，我直接使用 Number 构造函数，但还有很多其他方法

如果你觉得你需要以内联方式完成这一切，你可以应用相同的逻辑，但你会立即注意到重复代码的数量。

<h2>Calculator</h2>

<input type="number" id="number1" value="0" onchange="summa.value = (Number(number1.value) + Number(number2.value)).toLocaleString('sv-SE', {
    style: 'currency',
    currency: 'SEK',
    currencyDisplay: 'symbol',
    maximumFractionDigits: 0,
});" />
<br />

<input type="number" id="number2" value="0" onchange="summa.value = (Number(number1.value) + Number(number2.value)).toLocaleString('sv-SE', {
    style: 'currency',
    currency: 'SEK',
    currencyDisplay: 'symbol',
    maximumFractionDigits: 0,
});" />
<br />

<input type="text" readonly="readonly" id="summa" value="0" />

或者，您可以包含内联脚本作为体面的折衷方案。

<h2>Calculator</h2>

<input type="number" id="number1" value="0" />
<br />
<input type="number" id="number2" value="0" />
<br />
<input type="text" id="summa" readonly="true" value="0" />

<script type="module">
  const number1 = document.getElementById('number1');
  const number2 = document.getElementById('number2');
  const summa = document.getElementById('summa');

  function updateTotal() {
    const total = Number(number1.value) + Number(number2.value);
    summa.value = total.toLocaleString('sv-SE', {
      style: 'currency',
      currency: 'SEK',
      currencyDisplay: 'symbol',
      maximumFractionDigits: 0,
   });
  }

  number1.addEventListener('change', updateTotal);
  number2.addEventListener('change', updateTotal);
</script>

将文本输入中的值格式化为货币

Format value in text input to currency

评论

评论