Хорошо, если это не голландский эмигрант ... Я нашел ваш вопрос, когда искал решение одной из моих собственных проблем, но я решил быстро найти вам "решение".
Проблема с вашим кодом заключается в том, что вы получаете значения каждого из текстовых полей, не разбивая их на разрывы строк. Это делает весь текст в нем входящим в одну запись. Вторая проблема, с которой вы сталкиваетесь, заключается в том, что вы объединяете все значения в один результат, создавая одну большую линию, не разделяя их. Решение этой проблемы состоит в том, чтобы проиндексировать каждую строку в каждом поле, а затем объединить их для каждой записи.
Я буду объяснять мое простое решение шаг за шагом:
<form action="" id="combiForm">
<textarea id="textarea-1" rows="4" cols="50" name="comment" placeholder="Each enter makes a new input line..."></textarea>
<textarea id="textarea-2" rows="4" cols="50" name="comment" placeholder="Each enter makes a new input line..."></textarea>
<textarea id="textarea-3" rows="4" cols="50" name="comment" placeholder="Each enter makes a new input line..."></textarea>
<br>
<input type="text" id="separator" name="separator" placeholder="Input will be used as separator..."> <!--Used as seperator between each word-->
<br><br>
<input type="text" id="lWrapper" name="wrapper" placeholder="Left wrapper...">
<br>
<input type="text" id="rWrapper" name="wrapper" placeholder="Right wrapper...">
<br><br> <!--Wrappers above are the first and last characters of the output (for example { and })-->
</form>
<button onclick="genCombi()">Click</button>
<br>
<p>Combinations: <span id="comboCount"></span></p>
<h2>The result:</h2>
<textarea id="textarea-r" rows="50" cols="50" name="comment" placeholder="The result after clicking..."></textarea>
В основном я усердно закодировав все поля ввода, три верхних текстовых поля должны содержать все слова, которые вы хотите объединить, каждый перевод строки (новая строка, клавиша ввода и т. д. c) будет разделен. Пробелы и пробелы в вашем тексте не будут учитываться. Там я добавил несколько полей, таких как разделители и обертки, вы можете жестко закодировать несколько кнопок, но это также работает. Кнопка вызывает функцию в следующем бите, и textarea-r показывает результат после вызова функции. Вы можете добавить оператор If, чтобы проверить, является ли разделитель пустым, или просто жестко закодировать его как пробел.
<script>
function genCombi() {
var array1 = document.getElementById('textarea-1').value.split('\n'); //Getting the textfield corresponding to the ID
var array2 = document.getElementById('textarea-2').value.split('\n');
var array3 = document.getElementById('textarea-3').value.split('\n');
var resultArray = []; //Making of an empty array.
var resultField = document.getElementById('textarea-r'); //Getting the result field
var separator = document.getElementById('separator').value; //Getting the seperator
var lWrapper = document.getElementById('lWrapper').value; //Getting of both wrappers
var rWrapper = document.getElementById('rWrapper').value;
for (i = 0; i < array1.length; i++) { //The for loops to go through the first result of the first textfield, then the second result and then to add all third results.
for (x = 0; x < array2.length; x++) {
for (y = 0; y < array3.length; y++) {
resultArray.push(lWrapper + array1[i] + separator + array2[x] + separator + array3[y] + rWrapper); //Pushing to the resultArray we defined before.
}
}
}
resultField.value = resultArray.join("\n"); //Adding every single array row to a new row in the resultfield, hence the "\n"
document.getElementById("comboCount").innerHTML = resultArray.length; //Checking howmany rows we have and adding them to the combination counter span. Could also add a var to the first for loop and use that.
}
</script>
То, что мы здесь делаем, это l oop через каждую запись по одному и добавление второй и третьей записи. Я увеличу немного ближе к циклам for:
Здесь мы делаем следующее: мы добираемся до первой l oop, в то время как все еще на первой итерации мы go до второй l oop, пока еще на первой итерации мы go переходим к третьей l oop. Третий l oop проходит через все возможные записи, а затем возвращается ко второму l oop. Когда второй l oop сделан, он возвращается к первому l oop. Более или менее мы работаем спереди назад, делая это.
for (i = 0; i < array1.length; i++) {
for (x = 0; x < array2.length; x++) {
for (y = 0; y < array3.length; y++) {
resultArray.push(lWrapper + array1[i] + separator + array2[x] + separator + array3[y] + rWrapper);
}
}
}
Теперь я знаю, что это не будет лучшим решением, часть 1050 *, которую вы можете использовать в качестве примера (но я делаю не рекомендуется использовать теги
в качестве пробелов). Возможно, это лучшие решения для этого, но, на мой взгляд, это легко сделать, легко понять и легко расширить при необходимости.
Например, вы можете добавить другое текстовое поле, сделав кнопку который создает другой элемент, или используйте PHP для, в то время как или любой другой тип l oop (если вы работаете в Wordpress, например), чтобы динамически добавлять дополнительные поля.
Если вы хотите запустить Функция при обнаружении ввода в форме, вы можете добавить oninput = "genCombi ()" к тегу формы:
Наконец, я надеюсь, что код полезен для вас, и если есть какие-либо вопросы по этому поводу , например, как это работает, или как вы редактируете / расширяете / меняете определенные детали, дайте мне знать.
Рабочий фрагмент + код:
function genCombi() {
var array1 = document.getElementById('textarea-1').value.split('\n'); //Getting the textfield corresponding to the ID
var array2 = document.getElementById('textarea-2').value.split('\n');
var array3 = document.getElementById('textarea-3').value.split('\n');
var resultArray = []; //Making of an empty array.
var resultField = document.getElementById('textarea-r'); //Getting the result field
var separator = document.getElementById('separator').value; //Getting the seperator
var lWrapper = document.getElementById('lWrapper').value; //Getting of both wrappers
var rWrapper = document.getElementById('rWrapper').value;
for (i = 0; i < array1.length; i++) { //The for loops to go through the first result of the first textfield, then the second result and then to add all third results.
for (x = 0; x < array2.length; x++) {
for (y = 0; y < array3.length; y++) {
resultArray.push(lWrapper + array1[i] + separator + array2[x] + separator + array3[y] + rWrapper); //Pushing to the resultArray we defined before.
}
}
}
resultField.value = resultArray.join("\n"); //Adding every single array row to a new row in the resultfield, hence the "\n"
document.getElementById("comboCount").innerHTML = resultArray.length; //Checking howmany rows we have and adding them to the combination counter span. Could also add a var to the first for loop and use that.
}
<form action="" id="combiForm" oninput="genCombi()">
<textarea id="textarea-1" rows="4" cols="50" name="comment" placeholder="Each enter makes a new input line..."></textarea>
<textarea id="textarea-2" rows="4" cols="50" name="comment" placeholder="Each enter makes a new input line..."></textarea>
<textarea id="textarea-3" rows="4" cols="50" name="comment" placeholder="Each enter makes a new input line..."></textarea>
<br>
<input type="text" id="separator" name="separator" placeholder="Input will be used as separator...">
<br><br>
<input type="text" id="lWrapper" name="wrapper" placeholder="Left wrapper...">
<br>
<input type="text" id="rWrapper" name="wrapper" placeholder="Right wrapper...">
<br><br>
</form>
<button onclick="genCombi()">Click</button>
<br>
<p>Combinations: <span id="comboCount"></span></p>
<h2>The result:</h2>
<textarea id="textarea-r" rows="50" cols="50" name="comment" placeholder="The result after clicking..."></textarea>
Снимок экрана: https://prnt.sc/s5hby8
Ps: Если кто-нибудь найдет какие-либо ошибки или сможет улучшить или улучшить этот код , go впереди.