Script only working in the console even with document.ready

Question

I have a script that runs on a page. It doesn't work, but when I type it into the console then run it it works perfectly.

This might sound like other questions such as this one, but I already have $(document).ready(). All the variables already defined here have been defined earlier in the document.

$(document).ready(function(){
    for (var i = 0; i < posts.length; i++) {
        var post_html = posts_html[i];
        var link = posts[i];
        console.log(i);
        name = $(post_html)[5].childNodes[1].innerHTML;
        document.getElementsByClassName('posts')[0].innerHTML = document.getElementsByClassName('posts')[0].innerHTML + '<a href="' + link + '" class="sidebar_link sidebar_posts_link"><li>' + name + '</li></a>'
        console.log(name + ' - ' + posts + ' - ' + i + ' - ' + posts[i] + ' - ' + link);

    }
});

Answer 1

Add setTime out function in your code.please try below code:

$(document).ready(function(){  setTimeout(function(){
for (var i = 0; i < posts.length; i++) {
    var post_html = posts_html[i];
    var link = posts[i];
    console.log(i);
    name = $(post_html)[5].childNodes[1].innerHTML;
    document.getElementsByClassName('posts')[0].innerHTML = document.getElementsByClassName('posts')[0].innerHTML + '<a href="' + link + '" class="sidebar_link sidebar_posts_link"><li>' + name + '</li></a>'
    console.log(name + ' - ' + posts + ' - ' + i + ' - ' + posts[i] + ' - ' + link);

}
},5000);});