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

我想建立我自己的“关键字洗牌器”（如谷歌广告）。为此，我创建了一个HTML5文档，其中包含两个输入字段和一个输出字段

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

另外：我想操作输出行（例如，添加一些字符，例如“”、+或[]），但这可能是另一个问题：）

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

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
      }
  }
}

我的预期输出：

关键词关键词1
关键词关键词2
关键词3
关键词A关键词4
关键词B关键词1
关键词B关键词2
关键字B关键字3
关键字B关键字4
关键字C关键字1
关键字C关键字2
关键字C关键字3
关键字C关键字4

我得到的是：

关键字C关键字4

---

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

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

---

您需要连接每个迭代的值。您可以在循环结束时指定给输出元素

function关键字洗牌器（）{
var kw1_数组=['keywordA'、'keywordB'、'keywordC']；//关键字的一个索引数
var kw2_数组=['keyword1'、'keyword2'、'keyword3'、'keyword4']；//关键字的一个索引数
var输出=“”；
for（kw1_数组的值）{
for（kw2_阵列的值2）{
输出+=值+''+value2+'\n'；
document.getElementById（“输出”）.value=output；
}
}
}
关键字shuffler（）


函数关键字shuffler（）{
var kw1_数组=['keywordA'、'keywordB'、'keywordC']；
var kw2_数组=['keyword1'、'keyword2'、'keyword3'、'keyword4']；
for（kw1_数组的值）{
for（kw2_阵列的值2）{
var输出=值+''+value2+'
'；
document.getElementById（“输出”）.innerHTML+=输出；
控制台日志（输出）；
}
}
}
点击我查看
输出…
您只是在循环中每次都覆盖元素，而不是添加到元素中。