document.getElementsByName()
An outdated method that can lead to unexpected outcomes in a specific scenario involving for loops. It is recommended to use document.querySelectorAll()*, which is considered the Swiss ArmyTM knife of DOM methods. Here are some examples for replacing old methods with new ones:
<article class='x' name='x'></article>
// ... Any number of DOM elements meeting certain criteria
document.getElementsByClassName('x') /* ------> */ document.querySelectorAll('.x')
document.getElementsByName('x') /* -----------> */ document.querySelectorAll('[name=x]')
document.getElementsByTagName('article') /* --> */ document.querySelectorAll('article')
* For more details, refer to this article
If these DOM elements represent form controls (such as input fields like <input>, <select></select>, etc) and are contained within a <form></form> (although they can exist outside of a form), you can utilize the properties .forms and .elements:
<form id='x'>
<input name='z'>
// ... Multiple fields with the name 'z' (eg. ['name=z'])
</form>
// Reference form#x
const fx = document.forms.x
// Reference all form controls inside form#x
const fc = fx.elements
// Reference all form controls with ['name=z'] inside form#x
const fz = fc.z
/* OR */
/* Combine the above statements into one line */
const fXCZ = document.forms.x.elements.z
Demo
Explanation provided in the demo
//~~[1]~~
/* Referencing DOM Elements *///
//1a.
/* Example 1 */
// Getting all fields within form#example1
const exp1 = document.forms.example1.elements;
/*
Gather all input[name=quantity] within form#example1 into an HTML Collection
*/
const qty1 = exp1.quantity;
//1b.
/* Example 2 */
// Getting form#example2
const exp2 = document.getElementById('example2');
/*
Collecting all input within form#example2 into a NodeList
*/
const qty2 = exp2.querySelectorAll('input');
//~~[2]~~
/* Defining Function *///
//2.
/*
@Params collection -- An array-like object of fields (eg. 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]~~
/* Utilizing 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>