javascript - 用户表单输入一个值，进行转换并自动进入另一个表单作为值输入

Question

我有 2 个表单输入，用户输入第一个值，它会自动转换为货币，并作为值进入另一个输入表单。

我尝试了一些 DOM 操作，但我还不够扎实，无法做到这一点。

   <div class="form-group">
       <input id="inpDollar" class="form-control" type="number" 
       name="dollar" placeholder="dollar">
   </div>
   <div class="form-group">
       <input id="inpEuro" class="form-control" type="number" name="euro" 
       placeholder="euro">
   </div>

用户应填写带有输入字段的注册表单，其中 1 个是美元输入。假设他在字段中输入了值 10。现在这个 10 被转换为欧元，因此 id inpEuro 的另一个输入字段应该得到值 11,08(四舍五入为不带小数的整数，即 11)。

简而言之，如果您在输入字段中输入一个值，另一个输入会自动填充转换后的值，稍后提交。

Answer 1

您可以使用addEventListener听 input event ，然后从您的输入中读取值，将其相乘并设置另一个输入的值。

代码如下:

const dollarInput = document.getElementById('inpDollar')
const euroInput = document.getElementById('inpEuro')

const dollar2euro = 0.9;
const euro2dollar = 1. / dollar2euro;

dollarInput.addEventListener('input', () => {
  //if the value is empty or null
  if(!dollarInput.value) {
    euroInput.value = '';
    return;
  };
  const convertedValue = dollarInput.value * dollar2euro;
  euroInput.value = Math.round(convertedValue);
})

euroInput.addEventListener('input', () => {
  //if the value is empty or null
  if(!euroInput.value) {
    dollarInput.value = '';
    return;
  };
  const convertedValue = euroInput.value * euro2dollar;
  dollarInput.value = Math.round(convertedValue);
})

<div class="form-group">
       <input id="inpDollar" class="form-control" type="number" 
       name="dollar" placeholder="dollar">
</div>
<div class="form-group">
   <input id="inpEuro" class="form-control" type="number" name="euro" 
   placeholder="euro">
</div>

这并不完美，因为它不适用于 .5、10.、e (欧拉数)等输入 但这更多是输入元素本身的问题。