an unordered list from Array items using innerHTML in Javascript

Question

I am trying to add a bulleted list to the page after the user enters 'exit' into a prompt; the list should not include the term 'exit'. I was able to get the list in full using document.write but this included the 'exit' and got rid of my page formatting. I am pretty sure I need to use innerHTML, but when I do this all I get is the page without any of the array items. Any help is greatly appreciated.

<html>
<head>
    <img src="http://profperry.com/Classes20/JavaScript/lordoftherings.png" />
    <title>Javascript Test</title>
    <script>
    function askMe() {
        var fav_characterList = new Array();
        i = 0;
        var fav_character = "";

        while(fav_character != 'exit'){

            fav_character = prompt("Who's your favorite Lord of the Rings character\n\n Enter 'exit' to stop prompting", "");
            fav_characterList[i] = fav_character;

            i++;
        } 

        n = (fav_characterList.length);
        for(i = 0; i <= (n-1); i++){
            var list = fav_characterList[i];
            var MyList = getElementById('results');
            MyList.innerHTML = "<li>"+list+"</li>";


        }


    } 







    </script>

</head>
<body onload="askMe()">
    <ul>

        <div id="results">


        </div>
    </ul>


        <br/>
        <br/>

</body>

Mithun Satheesh · Accepted Answer · 2011-10-06 06:12:51Z

you have to use document.getElementById() and also generate a string inside the loop and use inner html after the loop so that the previous li's dont get over written.

update the code portions like

n = (fav_characterList.length);
    var kk="";

    for(i = 0; i <= (n-1); i++){
        var list = fav_characterList[i];
        kk += "<li>"+list+"</li>"


    }
var MyList = document.getElementById('results');        
MyList.innerHTML = kk;

and in html , remove the div inside ul and giv id to ul

 <ul id="results">


        </ul>

and here is the full code becomes:

<html>
<head>
<img src="http://profperry.com/Classes20/JavaScript/lordoftherings.png" />
<title>Javascript Test</title>
<script type="text/javascript">
    function askMe() 
{
    var fav_characterList = new Array();
    i = 0;
    var fav_character = "";

            while(fav_character != 'exit')
    {

            fav_character = prompt("Who's your favorite Lord of the Rings character\n\n Enter 'exit' to stop prompting", "");
            fav_characterList[i] = fav_character;
            i++;
            } 

    n = (fav_characterList.length);
    var kk="";

            for(i = 0; i <= (n-1); i++)
    {
            var list = fav_characterList[i];
            kk += "<li>"+list+"</li>"
    }

    var MyList = document.getElementById('results');
    MyList.innerHTML = kk;

    } 
    </script>

</head>
<body onload="askMe()">
    <ul id="results">
    </ul>
<br/>
<br/>
</body>
</html>

userx · Accepted Answer · 2011-10-06 05:54:52Z

1

You should use MyList.innerHTML += "<li>"+list+"</li>"; (notice the use of += instead of =)

Also, change your <ul> HTML to be:

...

<ul id="results">
</ul>

...

answered Oct 6, 2011 at 5:54

userx

3,8151 gold badge26 silver badges34 bronze badges

Collectives™ on Stack Overflow

an unordered list from Array items using innerHTML in Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related