CODEWITHSUNDEEP
javascriptjqueryhtml
Michael
Michael

Reputation: 375

jquery display a list of items in <ul>

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

Upvotes: 4

Views: 24717

Answers (3)

Xotic750
Xotic750

Reputation: 23472

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");

Upvotes: 5

Manish Mishra
Manish Mishra

Reputation: 12375

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

Upvotes: 11

MGA
MGA

Reputation: 8145

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

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

Upvotes: 1

Related Questions