Question

我想构建自己的“关键字洗牌器”（例如，用于Google Ads）。为此，我创建了一个HTML5文档，其中包含两个输入字段和一个输出字段。

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

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

我已经可以提取输入并将它们转换成两个数组。为了结合它们，我制作了一个嵌套的“ 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
      }
  }
}

我的预期输出：

关键字A关键字1
关键字A关键字2
关键字A关键字3
  关键字A关键字4
关键字B关键字1
关键字B关键字2
  关键字B关键字3
关键字B关键字4
关键字C关键字1
  keywordC keyword2
keywordC keyword3
keywordC keyword4

我能得到什么：

keywordC关键字4

Answer 1

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

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

Answer 2

 
  function keywordShuffler(){

    var kw1_array = ['keywordA','keywordB','keywordC']; 

    var kw2_array = ['keyword1','keyword2','keyword3','keyword4']; 

    for (value of kw1_array){

     for (value2 of kw2_array) {

    var output = value + ' ' + value2 + '<br>';

     document.getElementById("outputs").innerHTML += output;
    console.log(output);                
       }
     }
  }

  <button onclick="keywordShuffler()">click me to check</button>

  <span><div id="outputs"> outputs....</div></span>

Answer 3

您需要连接每次迭代的值。您可以在循环的末尾分配给输出元素。

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
  var output = '';
  for (value of kw1_array) {
    for (value2 of kw2_array) {
      output += value + ' ' + value2 + '\n';
      document.getElementById("output").value = output;
    }
  }
}

keywordShuffler();

<textarea id="output" rows="10"></textarea>

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

3 个答案: