0

I have a simple array with x number of items. I am displaying them individually via a link click... I want to update a number that say 1 of 10. when the next one is displayed i want it to display 2 of 10 etc...

I have looked all around and my brain is fried right now... I know its simple I just cant get it out.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <title>Page Title</title>
   <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8"/>
   <script type="text/javascript">
    var quotations = new Array()
        quotations[0]= "abcd"
        quotations[1]= "efgh"
        quotations[2]= "ijkl"
        quotations[3]= "mnop"
        quotations[4]= "qrst"
        quotations[5]= "uvwx"
        quotations[6]= "yzab"

        numQuotes = quotations.length;
        curQuote = 1;

        function move( xflip ) {
        curQuote = curQuote + xflip;
        if (curQuote > numQuotes)
        { curQuote = 1 ; }
        if (curQuote == 0)
        { curQuote = numQuotes ; }
        document.getElementById('quotation').innerHTML=quotations[curQuote - 1];
        }
        var curPage = curQuote
               </script>

</head>

<body>
<div id="quotation">
<script type="text/javascript">document.write(quotations[0]);</script>
</div>
<div>
<p><a href="javascript();" onclick="move(-1)">GO back</a>
<script type="text/javascript">document.write(curPage + " of " + numQuotes)</script>
<a href="javascript();" onclick="move(1)">GO FORTH</a></p>

</div>
</body>

</html>

Edit: curQuote is not updating dynamically... it stays at '1' when next is clicked.

Improve this question

3 Answers 3

Reset to default
1

In your code, curQuote is already the value you want. I rewrote everything to clean it up and show some better logic/syntax. Note that ideally you would be attaching the click handlers via DOM methods and not using inline handlers, but for simplicity I've left it that way here.

Working version viewable here: http://jsbin.com/irihu3/2

<html>
  <head>
    <title>Quotations</title>
    <script type="text/javascript" charset="utf-8">
      var quotations = ["hi", "how", "are", "you", "today", "good", "sir"],
        lastIndex = quotations.length - 1,
        currentIndex = 0;

      function move(xflip) {
        currentIndex = currentIndex + xflip;

        if (currentIndex > lastIndex) {
          currentIndex = 0;
        } else if (currentIndex < 0) {
          currentIndex = lastIndex;
        }

        document.getElementById('quotation').innerHTML = quotations[currentIndex] + " (Quote #" + (currentIndex + 1) + ")";
        return false;
      }
    </script>
  </head>
  <body>
    <div id="quotation">hi (Quote #1)</div>
    <a onclick="move(-1);">Prev</a>
    <a onclick="move(1)">Next</a>
  </body>
</html>

Some things to note:

  • Always declare variables with the var keyword or you create global variables.
  • You can combine multiple variable declarations into one statement by separating them with commas. It's good practice to stick to one var statement and to put it at the top of your code/function.
  • All you really need to keep track of here is the current index of the array, not the quote itself. It's also not important how long the array is, just what the last index is. As such, in my code I am using currentIndex and lastIndex instead of curQuote and numQuotes.
  • Using return false; at the end of your function will suppress the default action when clicking on a hyperlink (not following the link). This is what you want in this case, because you're using a hyperlink to trigger behavior on the page and not actually navigating to another page.
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

The code you have supplied here works as intended, however it doesnt provide a solution for my initial question... curQuote does not update dynamically for some reason. Thanks for updating the syntax and logic for me!
Not sure what you mean by "update dynamically." currentIndex in my code will always contain the index of the quote currently being displayed on the page. Because currentIndex is defined outside the move function, that same variable is always updated by the move function whenever you click a link.
When I load the page, it displays '1 of 7' when I click next(calling the move function) it still displays '1 of 7' even though the 2nd index of the array is displayed.
You need to update the div that indicates the page number (1 of 7) on every call to move.
ok... maybe I confused you by using numbers as my array variables this is just until I get it all working, there will be actual quotes as the variables. I want to display a 'counter' for lack of a better word at the bottom of said quotes to display what the number of the current quote is i.e. 4 of 7 etc... does that make sense?
|
1

You're making a lot of beginner mistakes in your JavaScript but it seems as if curQuote has the value you want, no?

Tips:
You can declare an array as such: var array = [1,2,3,4,5,6,7];
Terminate statements with a semi-colon.
Use var keyword for local variables.
Don't put braces around one line if statements bodies.
Use indentation properly to make the code readable.

Improve this answer

1 Comment

It updates every time you call move since you are assigning to it and it is a global variable.
0

Try this var curPage = quotations[curQuote];

Improve this answer

1 Comment

He needs the index not the value here. Additionally curQuote is set to numQuotes when it wraps around; you'll index out of bounds for that case.

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.