JavaScript 获取多个已知元素 ID

Question

我正在通过制作 Angular 色表 (rpg) 来学习 JS，我得到了一个这样设置的表单

<fieldset id="char-int">
  <label for="int">INT</label>
  <input id="int" name="int" placeholder="40" type="number" min="0" max="100">
  <input id="int-hard" name="int-hard" placeholder="20" type="number" min="0" max="100">
  <input id="int-extr" name="int-extr" placeholder="6" type="number" min="0" max="100">
</fieldset>

我需要使用简单的舍入除法更改 int-hard 和 int-extr 中的值.

window.onchange  = changevalue;

function changevalue() {
  var hardRoll = document.getElementById("int").value / 2;
  var extrRoll = document.getElementById("int").value / 5;

  var setStat = document.getElementById("str-hard").value = Math.floor(hardRoll);
  var setStat = document.getElementById("str-extr").value = Math.floor(extrRoll);

这行得通，但必须有更聪明的方法来做到这一点，因为我有多个 ID 我想做同样的事情，比如 STR、DEX 等。

Answer 1

您可以从输入中删除 id 并在 fieldset 的上下文中工作，如下所示:

<fieldset id="char-int">
  <label>
    INT
    <input name="int" placeholder="40" type="number" min="0" max="100">
  </label>
  <input name="int-hard" placeholder="20" type="number" min="0" max="100">
  <input name="int-extr" placeholder="6" type="number" min="0" max="100">
</fieldset>

function changevalue() {
    var fieldset = document.getElementById("char-int");
    var intField = fieldset.querySelector('["name=int"]');
    var intHardField = fieldset.querySelector('["name=int-hard"]');
    var intExtrField = fieldset.querySelector('["name=int-extr"]');
    // ...
}

(请注意，我还将您的 name="int" 字段移到了 label 中，因此我们不必使用 id 来链接它们。)

querySelector 在您调用它的元素中找到与给定 CSS 选择器匹配的第一个元素。 (还有 querySelectorAll，它查找所有匹配元素的列表。)

根据您可以参数化 changevalue 函数的实际逻辑的程度，您可以将名称更改为不包含 int-(或添加类)，然后传入字段集(或字段集实例本身)的id。

<fieldset id="char-int">
  <label>
    INT
    <input id="int-main" name="main" placeholder="40" type="number" min="0" max="100">
  </label>
  <input name="hard" placeholder="20" type="number" min="0" max="100">
  <input name="extr" placeholder="6" type="number" min="0" max="100">
</fieldset>

function changevalue(fieldSetId) {
    var fieldset = document.getElementById(fieldSetId);
    var mainField = fieldset.querySelector('["name=main"]');
    var hardField = fieldset.querySelector('["name=hard"]');
    var extrField = fieldset.querySelector('["name=extr"]');
    // ...
}

所有现代浏览器以及 IE8 都支持 QS 和 QSA。