Can you loop through data inside another loop-CodePudding

I have a html textarea where i paste lines of text, each 11 lines follows a repeating pattern. What i'd like to acheive is to loop through the first 11 lines, process each line then loop the next 11 lines and carry out the same process on those 11 lines. I have broken the lines into chunks of 11 lines each.

Problems: looping each chunk 12 times, no output to other textarea.

not sure if i'm even doing this correctly,

<!doctype html>
    <html>
    <head>  
    </head>
    <body>

    <textarea id="txtinput"  cols="150" rows="15"></textarea>
    <br />
    <button id="btn-pro">PROCESS</button>&nbsp;&nbsp;<button id="cleartxt">CLEAR</button>
    <br />
    <br />
    <textarea id="txtoutput"  cols="150" rows="15"></textarea>


    <script type="text/javascript">
        var input = document.querySelector('#cleartxt');
        var btnClick = document.querySelector('#btn-pro');
        var textarea = document.querySelector('.txtinput');

        input.addEventListener('click', function () {
            textarea.value = '';   
        }, false);
        //
        //
        btnClick.addEventListener('click', function () {

        var textArea = document.getElementById("txtinput");
        var lines = textArea.value.split("\n");

            for(var i = 0;i <= lines.length;i =11){
                const chunk = lines.slice(i, i   11);
                chunk.push(chunk);
                console.log(chunk);
                //
                for (const key in chunk) {
                    console.log('XXXXXXXXXXXXX: ' chunk[0]);
                    var L1 = chunk[0];
                    var L2 = chunk[1];
                    var L3 = chunk[2];
                    var L4 = chunk[3];
                    var L5 = chunk[4];
                    var L6 = chunk[5];
                    var L7 = chunk[6];
                    var L8 = chunk[7];
                    var L9 = chunk[8];
                    var L10 = chunk[9];
                    var L11 = chunk[10];

                    console.log('Line 1: ' L1 '\nLine 3: ' L2 '\nLine 3: ' L3 '\nLine 4: ' L4 '\nLine 5: ' L5 '\nLine 6: ' L6 '\nLine 7: ' L7 '\nLine 8: ' L8 '\nLine 9: ' L9 '\nLine 10: ' L10 '\nLine 11: ' L11);


                    //
                    document.getElementById("txtoutput").value = L1;
                }

            }
        
        }, false);
    </script>
        
    </body>
    </html>

my textarea is like this:

<textarea>
AAAA
BBBB
CCCC
DDDD
EEEE
FFFF
GGGG
HHHH
IIII
JJJJ
KKKK
AAAA
BBBB
CCCC
DDDD
EEEE
etc...
etc...



</textarea>

CodePudding user response：

Why do you try to push the chunk into itself?

const chunk = lines.slice(i, i   11);
chunk.push(chunk);
console.log(chunk);

CodePudding user response：

You can use splice() to create an array with chunks of another array.

var input = document.querySelector('#cleartxt');
var btnClick = document.querySelector('#btn-pro');
var textarea = document.querySelector('.txtinput');

input.addEventListener('click', function() {
  textarea.value = '';
}, false);

btnClick.addEventListener('click', function() {
  var textArea = document.getElementById("txtinput");
  var lines = textArea.value.split("\n");
  let len = 11, all = []
  while (lines.length>0) all.push(lines.splice(0,len));
  document.getElementById("txtoutput").value = all[0][1];
})

<textarea id="txtinput"  cols="150" rows="15">
1
12
123
1234
12345
123456
1234567
12345678
123456789
12345678910
1234567891011
123456789101112
a
ab
abc
abcd
abcde
abcdef
abcdefg
abcdefgh
abcdefghi
abcdefghij
abcdefghijk
abcdefghijkl
abcdefghijklm
abcdefghijklmnop
</textarea>
<br />
<button id="btn-pro">PROCESS</button>&nbsp;&nbsp;<button id="cleartxt">CLEAR</button>
<br />
<br />
<textarea id="txtoutput"  cols="150" rows="15"></textarea>