Member Avatar for laura301019

So i need to write or modify javascript code i think, for what i want to do. The web page im developing displays a table with two arrows beneath, one to go show next and one to show previous. I need the show previous arrow to display an alert box if the user selects it when the page is first loaded (they cant show previous because nothing has been shown yet). Again similar for the show next arrow, if the user selects it when the last name is displayed in the table then it should show a message saying no more names. I've no idea how to do this and it sounds like it should be easy. The code i have is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>COM301</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript">

    var studentNames = new Array ("Jack Dee", "Ruby Wax", "Billy Connolly", "Miranda Hart", "Al Murray");
    var regNumbers = new Array ("10001", "10002", "10003", "10004", "10005");
    var currentStudent = -1;

    function showNext() 
{ 
 currentStudent=currentStudent+1;
 document.getElementById("nameHolder").innerHTML=studentNames[currentStudent];
 document.getElementById("regNumberHolder").innerHTML=regNumbers[currentStudent];

} 

function showPrevious() 
{ 
currentStudent=currentStudent-1;
 document.getElementById("nameHolder").innerHTML=studentNames[currentStudent];
 document.getElementById("regNumberHolder").innerHTML=regNumbers[currentStudent];
 }

    </script>

</head>
<body>
<div id="mainContainer">

    <div id="topSection">
        <h1>COM301 Assessment 4 - Event-driven programming</h1>
    </div>

    <div id="contentWrapper">
        <div id="contentLeft">
            <div><b>Useful Links</b>
                <br />
                <a href="http://www.google.com">Click here for Google</a>
                <br />
                <a href="http://www.bbc.co.uk">Click here for BBC</a>
            </div>
        </div>       
        <div id="contentRight">
        <table border ="1" cellpadding ="2" align="center">
        <col width="200px"/>
        <col width ="200px"/>
        <tr>
        <th>StudentName</th>
        <th>Registration Number</th>
        </tr>
        <tr>
        <td id="nameHolder" title ="nameHolder" > </td>
        <td id="regNumberHolder" title="regNumberHolder">  </td>
        </tr>
        </table>
        <table border ="0" cellpadding ="2" align="center">
        <col width="200px"/>
        <col width ="200px"/>
        <tr>
        <th><img src = "leftArrow.gif" align ="" onClick="showPrevious()"/></th>
        <th><img src = "rightArrow.gif" align = "" onClick="showNext()"/> </th>
        </table>
        </div>
    </div>

    <div id="footer">
        A good place for a footer
    </div>

</div>               
</body>
</html>

This is not homework or anything. I am a university student and trying to get my skills up to scratch before I start placement. Any help would be great.

  • 2 Contributors
  • 1 Reply
  • 658 Views
  • 30 Minutes Discussion Span
  • Latest Post Latest Post by Taywin
Member Avatar for Taywin

You need to understand what "currentStudent" variable is being used in the script. In your case, it is an array index. It seems that you do not understand or have knowledge about array. You need to look it up for its fundamental concept online now before you go any further. If you take my sample for grants, you will never learn JavaScript.

What you really need to do is to check whether the value of currentStudent is out of range. The range of an array is from 0 (minimum index value) up to the number of items inside it minus 1 (maximum index value). Therefore, to work with this, showPrevious() will need to check whether the value is below 0, and showNext() will need to check for value not equal or greater than the maximum index range.

function showNext() {
  if ((currentStudent+1)>=studentNames.length) {  // the next index is out of range
    alert("Error message")
  }
  else {
    currentStudent=currentStudent+1;
    document.getElementById("nameHolder").innerHTML=studentNames[currentStudent];
    document.getElementById("regNumberHolder").innerHTML=regNumbers[currentStudent];
  }
}
function showPrevious() {
  if ((currentStudent-1)<0) {  // the previous index is lower than minimum index
    alert("Error message")
  }
  else {
    currentStudent=currentStudent-1;
    document.getElementById("nameHolder").innerHTML=studentNames[currentStudent];
    document.getElementById("regNumberHolder").innerHTML=regNumbers[currentStudent];
  }
}
Edited by Taywin
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.