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，但也没有用。如何在我的js中使用两个ID？

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

querySelectorAll用于数字框不起作用

1 个答案: