Question

我正在通过制作角色表（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-（或添加类），然后传入{{ 1}} fieldset（或fieldset实例本身）。

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>

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

Answer 2

我有多个ID，我想做同样的事情......

当你在这里这样的短语时，它可能是你需要使用类的标志。它们完全用于此：表示一组相似的元素。

所以你应该做的是将相同的类添加到所有元素，然后选择所有必需的元素，然后使用for循环来处理所有元素。

例如，HTML：

<input class="int" name="int" placeholder="40" type="number" min="0" max="100">
<input class="int-hard" name="int-hard" placeholder="20" type="number" min="0" max="100">
<input class="int-extr" name="int-extr" placeholder="6" type="number" min="0" max="100">

然后javascript：

var int = document.querySelectorAll('.int');

for (var i = 0; i < int; i++) {
    var hardRoll = int[i].value / 2;
    var extrRoll = int[i].value / 5;
}

Answer 3

试试这个解决方案：

// Your inputs, selected by ID
var inputs = document.querySelectorAll("#int-hard, #int-extr");

// Apply onchange to selected input fields
for(var i = 0, length = inputs.length; i < length; i++) {
  inputs[i].onchange = function() {
    this.value = Math.floor(this.value);
  }; 
}

请不要使用window.onchange，因为这会触发文档中的每次更改。

JavaScript获取多个已知元素ID

3 个答案: