javascript - 如何组合两个动态创建的数组的所有元素并将结果写入 HTML？

Question

我想构建自己的“关键字洗牌器”(例如，针对 Google Ads)。为此，我创建了一个包含两个输入字段和一个输出字段的 HTML5 文档。

想法是:您可以在每个输入字段中写入任意数量的单词(以逗号分隔)。然后，如果您单击一个按钮，输出字段会显示两个输入字段的所有可能组合(对)，条件是第一个单词来自“input1”，第二个单词来自“input2”。

另外:我想操作输出行(例如，添加一些字符，例如 '' 或 + 或 [] )，但这可能是另一个问题:)

我已经可以提取输入并将它们转换为两个数组。为了将它们结合起来，我制作了一个嵌套的“for .. of”函数。在我的 console.log 中我已经可以看到所有结果，但在我的“输出”字段中只有最后一个组合。

function keywordShuffler(){

var kw1_array = ['keywordA','keywordB','keywordC']; // an abritrary number of keywords

var kw2_array = ['keyword1','keyword2','keyword3','keyword4']; // an abritrary number of keywords

for (value of kw1_array){

    for (value2 of kw2_array) {

      var output = value + ' ' + value2;
      document.getElementById("output").value = output;
      console.log(output);                 // to test the output
      }
  }
}

我的预期输出:

keywordA keyword1
keywordA keyword2
keywordA keyword3
keywordA keyword4
keywordB keyword1
keywordB keyword2
keywordB keyword3
keywordB keyword4
keywordC keyword1
keywordC keyword2
keywordC keyword3
keywordC keyword4

我得到的:

keywordC keyword4

Answer 1

尝试将输出附加到一个元素，而不是用新值替换以前的值。

document.getElementById("output").value += output;