获取文本框的值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<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>
  <input type="text"><br>
  <input type="text"><br>
  <input type="text"><br>
  <input id="btn" type="button" value="获取文本框的值">
  <script>
    // 1 当页面加载完毕，给所有的文本框赋值
    var inputs = document.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
      var input = inputs[i];
      // 根据type属性 判断是否是文本框
      if (input.type === 'text') {
        input.value = i;
      }
    }

    // 2 当点击按钮的时候，获取所有文本框的值，并使用 | 分割输出
    // 0|1|2
    var btn = document.getElementById('btn');
    btn.onclick = function () {
      var s = '';
      for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i];
        // 判断是否是文本框
        if (input.type === 'text') {
          s += input.value + '|';
        }
      }
      // 把最后一个| 去掉
      s = s.substr(0, s.length - 1);
      console.log(s);
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<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>
  <input type="text"><br>
  <input type="text"><br>
  <input type="text"><br>
  <input id="btn" type="button" value="获取文本框的值">
  <script>
    // 1 当页面加载完毕，给所有的文本框赋值
    var inputs = document.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
      var input = inputs[i];
      // 根据type属性 判断是否是文本框
      if (input.type === 'text') {
        input.value = i;
      }
    }

    // 2 当点击按钮的时候，获取所有文本框的值，并使用 | 分割输出
    // 0|1|2
    var btn = document.getElementById('btn');
    btn.onclick = function () {
      var array = [];
      for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i];
        // 判断是否是文本框
        if (input.type === 'text') {
           array.push(input.value);
        }
      }
      console.log(array.join('|'));
    }
  </script>
</body>
</html>

相关阅读:
黑马程序员_网络编程
黑马程序员_ 异常
黑马程序员_面向对象基础
黑马程序员_循环语句的使用
黑马程序员_面向对象深入2
黑马程序员_ JAVA中的多线程
黑马程序员_JAVA基础知识总结3
OC-内存管理
OC-核心语法（3）（分类、SEL、类本质）
OC-核心语法2-构造方法

原文地址：https://www.cnblogs.com/jiumen/p/11399857.html