0

I'm developing a little website that allows the user to earn achievements based off a specific number of accomplishments. And I'm looking for a clean way to print the earned accomplishments on the screen from an Array.

Basically I want a vertical list display of an array that can update based on user interaction.

currently I have this:

function win() {
check = Number(localStorage.snum);

switch(check) {

    case 50:
    prizes.unshift('50: You infant');
    localStorage.priz = prizes;
    document.getElementById('awards').innerHTML = prizes;
    break;

    case 100:
    prizes.unshift('100: big whoop');
    localStorage.priz = prizes;
    document.getElementById('awards').innerHTML = prizes;
    break; 
}
}

and in the html I have

<div id="numbox"> </div>
<div id="awards"></div>

Amongst other things.

I would ideally like an 'Achievement box" that displays the array as a vertical list.

Help?

EDIT: I took out <br /> That I had in there as a hackjob vertical list.

I guess an Array would look like var prizes= new Array('50: You infant', '100: big whoop');

Improve this question
4
  • 2
    Could you post a sample array for us to see what you're working with? Commented Apr 27, 2011 at 18:07
  • It seems you want an unordered list (<ul>)? Commented Apr 27, 2011 at 18:08
  • The array starts out empty and as user increases counter things are added to the beginning of it. prizes = new Array(); <ul> would be great. Commented Apr 27, 2011 at 18:10
  • I just noticed, having voted up @Felix's answer. Previous comment deleted. :) Commented Apr 27, 2011 at 18:31

1 Answer 1

Reset to default
2

For a start:

var awards = {
    50: 'You infant',
    100: 'big whoop'
};

function win() {
    var points = +localStorage.snum; // shortcut to convert to a number
    if(points in awards) {
        var prize = awards[points];
        prizes.unshift(prize);
        localStorage.priz = prizes; // not sure if you really need this

        var list = document.getElementById('awards');
        var li = document.createElement('li');
        li.innerHTML = points + ': ' + prize;
        list.insertBefore(li, list.firstChild); // inserting at the beginning
    }
}

with this HTML:

<ul id="awards"></ul>

Using this kind of map makes it easier to extend it later ( I don't think you want to write a thousand case statements ;)).

You can style the list however you want to with CSS.

Update: DEMO, another DEMO

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

11 Comments

This displays the entire array right away? Can I add items to the array to be displayed only when a certain number is reached? Also, the list shows up with an obscure comma?
@Talon: I'm not really sure what you mean. I don't know when you call win or how you set the points for a user. The code is nearly doing the same as yours but it's structure is different. awards is just used instead of the switch statement. Here is a DEMO: jsfiddle.net/fkling/RBxTa
Okay, I think that will work. I just need to know how, instead of having a dedicated button, I can have the code check every time to see if document.getElementById('numbox').innerHTML = the value of localStorage.snum; and if so print the specific achievement associated with that value.
@Talon: I added another demo: jsfiddle.net/fkling/RBxTa/2 as I said I don't know how you compute the points or whatever. The button is just for the demo.
One more question. How can I save the achievements so that the next time the user visits they load up?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.