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
– adeneo, Commented Dec 8, 2015 at 0:10
You should also concatenate the entire HTML string before appending it - it'll make the code above much cleaner and improve performance. — tymeJV
– tymeJV, Commented Dec 8, 2015 at 0:10

Tyler Crompton · Accepted Answer · 2015-12-08 00:10:06Z

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 8, 2015 at 0:10

Tyler Crompton

12.8k15 gold badges69 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric Dauenhauer Over a year ago

Perfect - didn't know jQuery auto-closed tags. Thanks so much! The <td> thing was an accidental deletion when I was testing solutions - thanks for the reminder.

Community · Accepted Answer · 2017-05-23 11:59:20Z

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

Collectives™ on Stack Overflow

Javascript for loop running out of sequence

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related