请原谅我的极端天真……我正在尝试使用 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)
}
最佳答案
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>
关于javascript - getElementsByName() javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60962231/