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

9rbhqvlz  于 2023-02-07  发布在  Java
关注(0)|答案(1)|浏览(146)

我做了一个小的计算器,我想在那里的总和是以货币格式显示在只读输入文本。因为我是新的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
  });"
/>
vmpqdwk3

vmpqdwk31#

你发布的代码有很多错别字,但是它"不工作"的主要原因是对输入的程序更改不会触发change event,将你的方法抽象到它自己的脚本中,然后适当地处理更改并更新总数会清楚得多。
下面是一个将逻辑抽象为html和单独脚本的最小示例。输入已更改为type="number"以避免输入非数字值。然后脚本使用getElementById查询三个输入,并使用addEventListenerchange侦听器附加到两个接受输入的侦听器。最后,声明了一个函数,用格式化后的值更新第三个输入的值。

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构造函数但是有plenty of other methods *

如果你觉得你 * 需要 * 做这一切内联你可以应用同样的逻辑,但你会立即注意到重复代码的数量。

<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>

相关问题