Rosary app for the Palm Pre

I'm trying to create an app for the Palm Pre. It is a prayer app, more specifically a rosary app. If you are not a Catholic, a rosary is kind of like a necklace on which you count beads.

What I'm trying to do:

• You click on one of 4 buttons to select one of 4 sets of "mysteries".

-
The page then displays

• the title of the set of mysteries (except in a few cases)

• the title of the individual mystery

• the prayer that goes with it

• the bead you are on

-
Each page has a button, "Next Bead", which you click to advance to the next prayer and bead.

The routine goes like this:

• Before the mysteries

• Apostles Creed, Our Father, three Hail Marys, Glory Be, and Fatima prayer

-
Then, for each individual mystery

• Our Father, ten Hail Marys, Glory Be, and Fatima prayer

• this cycle will repeat 5 times for each of 5 mysteries.

-
After the mysteries - Hail Holy Queen

What I'm concerned about:

-
First, I'm not sure I have the best set up for the buttons at the beginning. With the phone SDK, the phone will have to 'listen' for which button is pressed. Did I set this up right?

-
Second, I have all of these if statements set up to pick which prayer occurs with which bead. Is this the most efficient way to do this?

All thoughts are appreciated.

```

var chaplet=new Array("The Joyful Mysteries","The Luminous Mysteries","The
Sorrowful Mysteries","The Glorious Mysteries");
var mystery=new Array();
mystery[0]=new Array("Annunc","Visit","The Nativ","Present","Temple");
mystery[1]=new Array("Baptism","Wedding", "Kingdom","Transfig","Eucharist");
mystery[2]=new Array("Agony","Scourging","Crowning","Carrying", "Crucif");
mystery[3]=new Array("Resurr","Ascension","Spirit","Assumption","Coronation");
var creed="I believe..."
var ourFather="Hallowed be"
var hailMary="Blessed are thou"
var gloryBe="As it was"
var fatima="Oh my Jesus"
var hailHolyQueen="To thee do we cry"
var dec=0;
var beadCount=0;
var mys=0;
var bead=0;

function

IMHO the code really needs a lot of work.

-
Use array literals to construct your arrays:

var chaplet = ["The Joyful Mysteries","The Luminous Mysteries" /* ... */ ];
var mystery = [
    ["Annunc","Visit","The Nativ","Present","Temple"],
    ["Baptism","Wedding", "Kingdom","Transfig","Eucharist"]
    // ...
];

-
There is no point in putting strings into variables if you don't use them multiple times. There is a point if you want to internationalize the App. In that case put all strings into a data structure, that can easily replaced with different languages:

var strings = {
  joyful_mysteries: "The Joyful Mysteries",
  luminous_mysteries: "The Luminous Mysteries",
  // etc.
};

-
div1, div2, etc. are very bad choices for ids. Use meaningful names.

-
Don't write the
elements. Leave them out, or use them instead of divs directly in your HTML. If you use them to change the distances between the elements, then use the style sheet for that instead.

-
Put the strings for divs 1 and 2 and beads one to seven and for div3 for all beads into arrays, too. And look into not repeating the texts and code of div4 either.

There is much more that could be suggested, but you should work on these points first, and then post a new question, when you've done that.

EDIT:

BTW, something completely else: Have you actually run your code? I just tried it for the first time, and it has several syntax errors (extra ; before else).

Also you seem to use the Internet Explorer event model. I'm not familiar with Palm Pre, but I doubt it uses the IE model and I believe it would be better to use the standard DOM model. Don't use IE for testing, or you will learn it's non-standard behavior.

StackExchange Code Review Q#2885, answer score: 10