Home/ Questions/Q 665509
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T23:42:57+00:00

I have a simple array with x number of items. I am displaying them

  • 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.
    • 0