Q:

Display elemens of 2 arrays in 

And thanks in advance for looking into this, I am trying to show elements of 2 arrays in html (li) tags. This should be the format echoed out:
array1; array2
c201;100
c202;0
c450;320
......

The elements that will be pushed into the array are coming from input fields. I have created the following code and I get to see the correct format but when I copy and paste the values above, it loses the format and instead of having two columns, it pastes elements of array2 just below the elements of array1:

    <!doctype html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>My Web Page</title>    
    <script>
    var array_accounts = [];
    var array_credits = [];
    var x = 0;
    var i = 0;
    var z = 0;
    function spara(){
     var accounts_code_str = document.getElementById('accounts').value;
     var accounts_code_comma = accounts_code_str.split(' ');
     var accounts_code_comma = accounts_code_comma.join(';<br>');
     array_accounts.push(accounts_code_comma);
     console.log(array_accounts);
     var iz_credits_str = document.getElementById('credits').value;
     var iz_credits_comma = iz_credits_str.split(" ");
     //var iz_credits_comma = iz_credits_comma.join('<br> ');
     for(var z=0; z<iz_credits_comma.length; z++){
      if(iz_credits_comma[z] < 0){
       iz_credits_comma[z] = 0;
      }
     }
     var iz_credits_comma = iz_credits_comma.join('<br> ');
     array_credits.push(iz_credits_comma);
     showAccounts();
     showCredits();
    }
    </script>
    </head>
    <body>
    <h1>Accounts and IZ credits</h1>
    <div id="form">
    <form>
    <label>Insertar Accounts codes</label>
    <input type="text" name="accounts" id="accounts" />
    <label>Insertar Iz credits</label>
    <input type="text" name="credits" id="credits" />
    <input type ="button" onclick="spara()" value="Process data" />
    </form>
    </div>
    <div id="codes" style="float:left">
    <script>
    function showAccounts(){
     for (var x=0;x<array_accounts.length;x++){
        document.write('<div style="float:left;">'+array_accounts[x]+';</div>');
     }
    }
    </script>
    </div>
    <div id="credits" style="float:left">
    <script>
    function showCredits(){
    for (var i=0;i<array_credits.length;i++){
       document.write('<div style="float:left;">'+array_credits[i]+'<br></div>');
      }
    }
    </script>
    </div>
    </body>
    </html>

Many thanks in advance for your help!

A:

Hope this helps!
<script>
    var array_accounts = [];
    var array_credits = [];
    var x = 0;
    var i = 0;
    var z = 0;
    function spara(){
        var accounts_code_str = document.getElementById('accounts').value;
        array_accounts = accounts_code_str.split(' ');
        console.log(array_accounts);
        var iz_credits_str = document.getElementById('credits').value;
        var iz_credits_comma = iz_credits_str.split(" ");
        array_credits=iz_credits_comma;
        //var iz_credits_comma = iz_credits_comma.join('<br> ');
        for(var z=0; z<iz_credits_comma.length; z++){
            if(iz_credits_comma[z] < 0){
                iz_credits_comma[z] = 0;
            }
        }
        showAccounts();
    }
    function showAccounts(){

        var ol = document.createElement("OL");
        for (var x=0;x<array_accounts.length;x++){
            var li = document.createElement("LI");
            var textnode = document.createTextNode(array_accounts[x]+';'+array_credits[x]);
            li.appendChild(textnode);
            ol.appendChild(li)
        }
        document.getElementById("codes").appendChild(ol);
    }
</script>

Modify the two javascript functions and that should do the trick! Thanks.

