JavaScript（6）：给表单中的每个input元素设置随机的值【或随机的名】

设置HTML表单中input元素的随机值和name属性

原创于 2023-01-04 12:38:43 发布 · 353 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

该文章介绍了一个JavaScript函数，用于遍历form对象的elements集合，为表单内的非按钮input元素赋予随机的value和name属性。函数通过querySelector获取表单元素，然后循环处理每个input，避免了按钮类型。每项input的value被设置为geo加上索引，而name属性虽然在代码中被注释掉，但表明可以同样方式设置。

分析

form对象.elements：获取form中的所有input元素标记对
form对象.elements[数组索引]：获取某个input元素标记对
form对象.elements[数组索引].type：获取/设置当前input的type值

代码

给表单中的每个input元素设置随机的值
给表单中的每个input元素设置随机的name

//给表单中的每个input元素设置随机的值
function setRandomData (){
    //获取表单内的元素
    //querySelector()方法仅仅返回匹配指定选择器的第一个元素
    var formElements=document.querySelector("form").elements;

    //根据name的值，设置不同类型的随机数
    for (var i = 0; i < formElements.length; i++) {
        //如果不是按钮
        if(formElements[i].type!=='button'&&formElements[i].type!=='submit'){
            //给每个input元素设置随机的value
            formElements[i].value="geo"+i+"ffwo"+i;
            //给每个input元素设置随机的name
            //formElements[i].name="geo"+i+"ffwo"+i;
        }
    }
}