javascript - getElementsByName() javascript

Question

请原谅我的极端天真……我正在尝试使用 getElementByName 方法执行 JavaScript，但本质上，当我到达该站点时，我希望在数量字段中输入 0(15 秒后)到达所述站点)。

这是我检查数量字段时得到的结果 -

<input type ="text" name="quantity" value="1" size="3">

function emptylocation() {

    var myVar = setInterval(emptylocation, 15000);

    (document.getElementByName("quantity")[0].value = 0)
    (document.getElementByName("quantity")[1].value = 0)
    (document.getElementByName("quantity")[2].value = 0)
    (document.getElementByName("quantity")[3].value = 0)
    (document.getElementByName("quantity")[4].value = 0)
    (document.getElementByName("quantity")[5].value = 0)
}

Answer 1

document.getElementsByName()

一种旧方法，在涉及 for 的边缘情况下会产生意外结果循环。而是使用 document.querySelectorAll() ^* 这是 DOM 方法的瑞士军刀^TM。将左侧的以下方法替换为右侧的方法:

  <article class='x' name='x'></article>
  // ... Any amount of DOM elements that meet specific traits

  document.getElementsByClassName('x') /* ------> */ document.querySelectorAll('.x')
  document.getElementsByName('x') /* -----------> */ document.querySelectorAll('[name=x]')
  document.getElementsByTagName('article') /* --> */ document.querySelectorAll('article')

^{* 另请参阅此 article}

document.forms & .elements

如果这些 DOM 元素是表单控件(也称为字段 - 例如 <input> 、 <select></select> 等)，并且位于 <form></form> 内(它们应该是这样，尽管没有 <form></form> 仍然有效)-- .forms和.elements可以使用的属性:

<form id='x'>
  <input name='z'>
  // ... Any amount of fields with the name of 'z' (ie ['name=z'])
</form>

// Reference form#x
const fx = document.forms.x
// Reference all form controls within form#x
const fc = fx.elements
// Reference all form controls with ['name=z'] within form#x
const fz = fc.z

/* OR */
/* The above statements in one line */
const fXCZ = document.forms.x.elements.z

<小时/>

演示

详细信息在演示中评论

//~~[1]~~
/* Reference DOM Elements *///

//1a. 
/* Example 1 */
// Reference all fields within form#example1
const exp1 = document.forms.example1.elements;
/*
Collect all input[name=quantity] within form#example1 into a HTML Collection
*/
const qty1 = exp1.quantity;

//1b. 
/* Example 2 */
// Reference form#example2
const exp2 = document.getElementById('example2');
/*
Collect all input within form#example2 into a NodeList 
*/
const qty2 = exp2.querySelectorAll('input');

//~~[2]~~
/* Define Function *///

//2.
/*
@Params collection -- An array-like object of fields (ex. qty1 or qty2)
        dataString -- A String assigned to each field - defaults to "0" 
                      if not specified
*/
function changeValue(collection, dataString = "0") {
  collection.forEach(field => field.value = dataString);
}

//~~[3]~~
/* Invoke setTimeout() *///

//3a.
/* Example 1 */
setTimeout(function() {
  changeValue(qty1, '0');
}, 15000);

//3b.
/* Example 2 */
setTimeout(function() {
  changeValue(qty2);
}, 15000);

<form id='example1'>
  <input name="quantity" type="number" value="1" size="3">
  <input name="quantity" type="number" value="1" size="3">
  <input name="quantity" type="number" value="1" size="3">
  <input name="quantity" type="number" value="1" size="3">
  <input name="quantity" type="number" value="1" size="3">
  <input name="quantity" type="number" value="1" size="3">
</form>
<hr>
<form id='example2'>
  <input name="quantity" type="number" value="1" size="3">
  <input name="quantity" type="number" value="1" size="3">
  <input name="quantity" type="number" value="1" size="3">
  <input name="quantity" type="number" value="1" size="3">
  <input name="quantity" type="number" value="1" size="3">
  <input name="quantity" type="number" value="1" size="3">
</form>