Javascript for loop running out of sequence

Question

I have a confusing problem where a line of code in my function is running before a loop which is stated above it. In my HTML I have:

<textarea id="textBox"></textarea>
<button id="submitButton" onclick="parseData()">submit</button>
<div id="put"></div>

And my JS function is:

function parseData() {
    var data = $("#textBox").val();
    var tab = /\t/;
    data = data.split(tab);
    $("#put").html($("#put").html() + "<table>");
    for (var i = 0; i < data.length; i++) {
        $("#put").html($("#put").html() + "<tr>"+data[i]+"</tr>");
    };
    $("#put").html($("#put").html() + "</table>");
    return;
};

The resulting html in $("#put") is this:

<table></table>
"SiO2 (%)Al2O3 (%)TiO2 (%)CaO2 (%)MgO2 (%) 8.21.25.31.51.8 45.32.52.60.210.5 65.23.48.70.0662.3 20.11.85.42.540.2 18.91.12.34.810.7"

I'm not sure why the final </table> is being placed before the for loop runs, and I'm not sure why the <tr> tags aren't being added within the for loop. Any pointers?

You can't add partial HTML to `html()`, it expects valid HTML, with opening and closing tags etc. so it can build the elements. Use a variable to store the HTML string instead, and use `html()` only once, when the loop has completed. — adeneo, Dec 08 '15 at 00:10
You should also concatenate the entire HTML string before appending it - it'll make the code above much cleaner and improve performance. — tymeJV, Dec 08 '15 at 00:10

score 4 · Accepted Answer · answered Dec 08 '15 at 00:10

4

jQuery automatically closes up tags upon insertion. Try this.

function parseData() {
    var data = $("#textBox").val();
    var tab = /\t/;
    var put_html = $("#put").html() + "<table>";
    data = data.split(tab);
    for (var i = 0; i < data.length; i++) {
        put_html += "<tr>"+data[i]+"</tr>";
    };
    put_html += '</table>';
    $("#put").html(put_html);
    return;
};

However, I notice that you aren't using <td> elements. You might want to look into fixing that too.

answered Dec 08 '15 at 00:10

Tyler Crompton

12,284
14
65
94

Perfect - didn't know jQuery auto-closed tags. Thanks so much! The `` thing was an accidental deletion when I was testing solutions - thanks for the reminder. – Eric Dauenhauer Dec 08 '15 at 00:14

score 2 · Answer 2 · edited May 23 '17 at 11:59

Every time you are adding content into the html() property rather than building the entire content and adding it.

Since you are using jQuery you can bind the event using jQuery rather than adding that directly in the HTML

<textarea id="textBox"></textarea>
<button id="submitButton">submit</button>
<div id="put"></div>

$(function(){
    $("#submitButton").click(function(){
        parseData();
    });

    function parseData() {
        var data = $("#textBox").val();
        var tab = /\t/;
        data = data.split(tab);

        // Build your html
        $("#put").html('htmlstructure');
        return;
    }
});

Also you can look for something similar like concatenating the string in an array so that you don't create string isntances each time when you append, since strings are immutable.

Good example

Javascript for loop running out of sequence

2 Answers2