Hi I want to display a list of item inside

sample html code

<h3 id="game-filter" class="gamesection">
           <span>Game</span></h3>
        <div id="game-filter-div" style="padding: 0;">
            <ul id="gamelist">
            </ul>
        </div>

code

var games = new Array();
    games[0] = "World of Warcraft";
    games[1] = "Lord of the Rings Online";
    games[2] = "Aion";
    games[3] = "Eve Online";
    games[4] = "Final Fantasy XI";
    games[5] = "City of Heros";
    games[6] = "Champions Online";
    games[7] = "Dark Age of Camelot";
    games[8] = "Warhammer Online";
    games[9] = "Age of Conan";
    function pageLoaded(){
        var list = "";

            for(i=0; i<games.length; i++){
        list ="<li>"+games[i]+"</li>";
        $("#gamelist").append(list);
        //document.getElementById("gamelist").innerHTML=list;
        list = "";
        }

}

Seems there is wrong with my js code. It doesn't output anything

Hi I want to display a list of item inside

sample html code

<h3 id="game-filter" class="gamesection">
           <span>Game</span></h3>
        <div id="game-filter-div" style="padding: 0;">
            <ul id="gamelist">
            </ul>
        </div>

code

var games = new Array();
    games[0] = "World of Warcraft";
    games[1] = "Lord of the Rings Online";
    games[2] = "Aion";
    games[3] = "Eve Online";
    games[4] = "Final Fantasy XI";
    games[5] = "City of Heros";
    games[6] = "Champions Online";
    games[7] = "Dark Age of Camelot";
    games[8] = "Warhammer Online";
    games[9] = "Age of Conan";
    function pageLoaded(){
        var list = "";

            for(i=0; i<games.length; i++){
        list ="<li>"+games[i]+"</li>";
        $("#gamelist").append(list);
        //document.getElementById("gamelist").innerHTML=list;
        list = "";
        }

}

Seems there is wrong with my js code. It doesn't output anything

• javascript
• jquery
• html

• it is not javascript, its jQuery. did you reference the jQuery api? – Manish Mishra Commented Apr 19, 2013 at 20:15
• also, you are not calling pageLoaded() function anywhere – Manish Mishra Commented Apr 19, 2013 at 20:17
• Are you running items in the array in your code or is it commented out? – j08691 Commented Apr 19, 2013 at 20:19

3 Answers 3

There are so many things you are doing wrong in it.

Firstly, it is not pure javascript, its jquery.

you need to reference jQuery api to be able to use jQuery.

however, you can achieve what you want through pure javascript also.

Now let's look at your mistakes

1. you have created a function pageLoaded, but have not called it anywhere. You need to call a function in order to make its logic work. Am assuming you want to call your pageLoaded method when the page is ready. you can either call it on body load or simply inside jQuery's .ready i.e $(document).ready(function(){ pageLoaded()});. This method simply ensures, your logic executes when the dom is ready

2. you have written non-keyword, meaningless words inside your method "items in the array". remove it in order to make your function work. Am assuming you wanted to put a comment over there, put a comment like this inside script tag:

    //items in the array
   

3. you are not concatenating new values to your list variable, you are overwritting its content with each iteration, so instead of list ="<li>"+games[i]+"</li>"; this, do this

    list +="<li>"+games[i]+"</li>";
   

4. finally, you are appending the list to #gamelist inside the for loop. do it outside the loop. once your list is complete. and remove the line list=" " so place this line $("#gamelist").append(list); outside the for loop.

try your function like this:

var games = new Array();
    games[0] = "World of Warcraft";
    games[1] = "Lord of the Rings Online";
    games[2] = "Aion";
    games[3] = "Eve Online";
    games[4] = "Final Fantasy XI";
    games[5] = "City of Heros";
    games[6] = "Champions Online";
    games[7] = "Dark Age of Camelot";
    games[8] = "Warhammer Online";
    games[9] = "Age of Conan";
$(document).ready(function(){
        var list = "";
        for(i=0; i<games.length; i++){
        list +="<li>"+games[i]+"</li>";
        }
    $("#gamelist").append(list);

});

see this fiddle

On jsfiddle

<h3 id="game-filter" class="gamesection"><span>Game</span></h3>

<div id="game-filter-div" style="padding: 0;">
    <ul id="gamelist"></ul>
</div>

var games = ["World of Warcraft", "Lord of the Rings Online", "Aion", "Eve Online", "Final Fantasy XI", "City of Heros", "Champions Online", "Dark Age of Camelot", "Warhammer Online", "Age of Conan"];

var gamelist = document.getElementById("gamelist");

games.forEach(function (game) {
    var li = document.createElement("li");

    li.textContent = game;
    gamelist.appendChild(li);
});

This is pure Javascript but I see you changed your tag to jQuery, but I will leave it here.

Additionally if you didn't want to create the array initialised, like I did above, you could have done it like this, as new Array() is considered bad practise.

var games = new Array();

games.push("World of Warcraft");
games.push("Lord of the Rings Online");
games.push("Aion");
games.push("Eve Online");
games.push("Final Fantasy XI");
games.push("City of Heros");
games.push("Champions Online");
games.push("Dark Age of Camelot");
games.push("Warhammer Online");
games.push("Age of Conan");

You need to refresh the listview after dynamically appending elements in it; otherwise it won't update.

 $("#gamelist").append(list).listview("refresh");