javascript - JavaScript 中的连接

Question

由于某种原因，当 keyText 变量应该连接关键字中的每个变量时，它没有显示任何值。

当有人单击按钮时，它会运行 addKeyword 并获取输入的值。

尝试通过 Console.Log 记录 keyText 变量，但根本不起作用。

var keywords = [];
      var keyText = "";

      function addKeyword() {
          var keywordName = document.getElementById("keywordAdd").value
          keywords.push(keywordName);

          keywords.forEach(showKeywords);

          function showKeywords(item, index) {
              var newString = "<span class='keyword' onclick='delKeyword(" + index + ")'>✖ " + item + "</span>";
              keyText.concat(newString);
              document.getElementById("keywords").innerHTML = keyText;
          }

      }

控制台中没有显示错误。预期结果是一个列表，但未显示。

Answer 1

问题是 .concat不会改变字符串，它返回一个新字符串。 你需要做这样的事情:

keyText = keyText.concat(newString);

顺便说一句，您当前的方法效率不高，因为它会在每次迭代时更改元素的内部 HTML。您应该只在生成所有元素的 HTML 后执行一次该操作。这是另一种方法:

const result = keywords.map((item, index) => (`<span class="keyword" onclick="delKeyword(${index})">✖ ${item}</span>`)).join('');
document.getElementById("keywords").innerHTML = result;