javascript - querySelectorAll 对于数字框不起作用

Question

document.querySelectorAll('#salary-min, #salary-max').addEventListener('input', event =>
  event.target.value = (parseInt(event.target.value.replace(/[^\d]+/gi, '')) || 0).toLocaleString('en-US')
);

<div id="salary-range">
  <div>
    <div class="input">
      <label for="salary">Minimum salary</label>
      <input class='inp_cont' id="salary-min" pattern="^[\d,]+$" name="salary" placeholder="Enter your salary" required="" type="text">
    </div>
  </div>
  <div>
    <div class="input">
      <label for="salary">Maximum salary</label>
      <input class='inp_cont' id="salary-max" pattern="^[\d,]+$" name="salary-max" placeholder="Enter your salary" required="" type="text">
    </div>
  </div>
</div>

我尝试让salary-min和salary-max都使用js代码进行逗号分隔。我也尝试过ElementsByClass，但这也不起作用。如何让两个 ID 在我的 js 中工作？

Answer 1

您无法在元素集合上调用为单个元素设计的方法。

使用循环。

const handler = event => event.target.value = (parseInt(event.target.value.replace(/[^\d]+/gi, '')) || 0).toLocaleString('en-US');

for (const el of document.querySelectorAll('#salary-min, #salary-max')) {
  el.addEventListener('input', handler);
}

顺便说一句，您的正则表达式可以从 /[^\d]+/gi 缩短为 /\D+/gi