JavaScript Forum

**steveb_ni** · 11-14-2009, 08:21 PM

Hi all (first post here!)

I'm hoping someone will be able to help me with a problem I've been trying to work on for a while now... basically the announcements panel is to show only the top five announcements (i.e. the 5 most recent announcements) and retain the rest of them in an archive.

The code for the div in question is:

Code:

<div id="announcements">

    <p class="main_text" align="center"><b>Announcements</b></p>
<script type="text/javascript">
var scripts = new Array();

scripts[0] = "<b> Date: 22 Oct </b> <br />details";
scripts[1] = "<b> Date: 24 Oct </b> <br />details";
scripts[2] = "<b> Date: 25 Oct </b> <br />details";
scripts[3] = "<b> Date: 27 Oct </b> <br />details";
scripts[4] = "<b> Date: 28 Oct </b> <br />details";
scripts[5] = "<b> Date: 29 Oct </b> <br />details";
scripts[6] = "<b> Date: 30 Oct </b> <br />details";

document.write("<table>");
scripts=scripts.reverse();
for (i=0;i<5;i++)
{


document.write(scripts[i] + "<br >");
document.write("</td> </tr>");
document.write("</table>");
}


</script>

This prints out the latest 5 announcements. However, I would like to have a button which calls the almost identical script, with the subtle change of scripts length (shown in bold):

document.write("<table>");
scripts=scripts.reverse();
for (i=0;i<scripts.length;i++)
{

document.write(scripts[i] + "<br >");
document.write("</td> </tr>");
document.write("</table>");
}

This would hopefully display every annoucement.

Is there any way I can automatically display the first 5, then when the button is clicked the scripts.length function is executed instead?

Thanks for any help!

Steven

**JeremyMiller** · 11-18-2009, 05:31 PM

I'm sorry. I'm really swamped right now, so I don't have much time to go into the details and will be just dumping some code on you. If you have any questions, just ask and I'll answer them as soon as I can.

Functions (or classes/objects, but I'm choosing functions) are the answer when you're asking about "the almost identical script".

This code includes your stuff in a function, changes your unneeded table to an ordered list, provides an input field updated on each key entered, and uses the DOM to access the page (except for your "scripts" array's strings).

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title></title>
    <script type="text/javascript">
    var scripts = new Array();

    scripts[0] = "<b> Date: 22 Oct </b> <br />details";
    scripts[1] = "<b> Date: 24 Oct </b> <br />details";
    scripts[2] = "<b> Date: 25 Oct </b> <br />details";
    scripts[3] = "<b> Date: 27 Oct </b> <br />details";
    scripts[4] = "<b> Date: 28 Oct </b> <br />details";
    scripts[5] = "<b> Date: 29 Oct </b> <br />details";
    scripts[6] = "<b> Date: 30 Oct </b> <br />details";

    function updateScripts(number_to_show) {
      //Calculate start and end indices
      var li_elem;
      var start = scripts.length - 1;
      var end = Math.max(0,scripts.length - number_to_show - 1);

      //Remove all LI children
      //Didn't remember the code off-hand, so this is modified from
      // http://matthom.com/archive/2007/05/03/removing-all-child-nodes-from-an-element
      if (document.getElementById('scripts_dates').hasChildNodes()) {
        while (document.getElementById('scripts_dates').childNodes.length >= 1 ) {
          document.getElementById('scripts_dates').removeChild(document.getElementById('scripts_dates').firstChild );
        }
      }

      for (i=start;i>end;i--) {
         li_elem = document.createElement('LI');
         li_elem.innerHTML = scripts[i];
         document.getElementById('scripts_dates').appendChild(li_elem);
      }
    }
    </script>
  </head>
  <body onLoad="updateScripts(5);">
    <div id="announcements">
      <p class="main_text" align="center"><b>Announcements</b></p>
      <ol id="scripts_dates"></ol>
      <p>Number to show: <input type="text" size="5" onKeyUp="updateScripts(this.value);" ></p>
    </div>
  </body>
</html>

**steveb_ni** · 11-23-2009, 06:11 AM

Thanks very much for your solution!

I think she has got it sorted now but I will be in touch if there are any questions!

Regards

Steven

**JeremyMiller** · 11-24-2009, 04:18 AM

No problem. Was just re-reading my post and can't figure out why I chose to put "scripts" in double-quotes. Not even correctly punctuated... at least the code worked.