JS---案例：大量字符串拼接效果實現

時間 2019-12-26

標籤案例大量字符串拼接效果實現欄目 JavaScript 简体版

原文原文鏈接

案例：大量字符串拼接效果實現

按鈕點擊，字符串拼接，最後效果字符串，strhtml

input有不少，type來分就有button和text，須要找出inputs[i].value是text的數組

因此用！="button"，知足條件就push進str，因此是str.push(inputs[i].value)spa

console.log顯示，用str.join就可拼接，加個|清楚一點code

簡而言之，遍歷順便拿到inputs[i].value不是按鈕的，push進str, 最後join進strhtm

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>

</head>

<body>
  <input type="button" value="拼接吧" id="btn" /><br />
  <input type="text" value="" /><br />
  <input type="text" value="" /><br />
  <input type="text" value="" /><br />
  <input type="text" value="" /><br />
  <input type="text" value="" /><br />
  <script src="common.js"></script>
  <script>

    //推薦使用數組的方式拼接大量的字符串
    document.getElementById("btn").onclick = function () {
      var str = [];
      //獲取全部的文本框
      var inputs = document.getElementsByTagName("input")
      //每一個文本框的value屬性值
      for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type != "button") {
          str.push(inputs[i].value);
        }
      }
      console.log(str.join("|"));//字符串
    };

  </script>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。