JS之for循环为文本框赋值和取值

最新推荐文章于 2024-06-08 09:44:34 发布

weixin_30701521

最新推荐文章于 2024-06-08 09:44:34 发布

阅读量791

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/creazybeauty/p/8058530.html

本文介绍了一个简单的HTML页面示例，该页面通过JavaScript实现了对多个文本框的批量赋值与取值功能。点击“赋值”按钮后，每个文本框会被自动填充一个从0开始递增的数字；点击“取值”按钮，则会收集所有文本框的内容并在浏览器的控制台中显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：点击赋值按钮，为所有的文本框赋值；点击取值按钮，将所有的文本框的值打印在控制台上

<body>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<input type="text"/><br>
<button>赋值</button><br>
<button>取值</button>
<br><br><br>
<script>
var inpArr = document.getElementsByTagName("input");
var buArr = document.getElementsByTagName("button");
//赋值
buArr[0].onclick = function(){
    for (var i = 0; i < inpArr.length; i++) {
        inpArr[i].value=i;

    }
}
//取值
buArr[1].onclick = function(){
    var newArr=[];
    for (var i = 0; i < inpArr.length; i++) {
        newArr.push(inpArr[i].value);
    }
    console.log(newArr.join("-"));
}
</script>
</body>