Modern/Better solution to this old Javascript?

Warf

New Member
Hello, I want to create a new web page. I found some old Javascript code that I used probably 8 years ago, Which does exactly what I want to achieve on the new page.

From what I read, Javascript is not preferred code these days, so I would like to find a modern solution to do the same thing. (or maybe the old code is fine to use today?)

Updating the styling is not a problem, I can do that fine, I just need help to update/replace the Javascript with a valid modern equivalent.

An example page can be seen on my website, and I would like the new code to work exactly the same if possible: www.normsweb.com/test/Pager.htm

Any advice appreciated, thanks!
Norm.

Here is the code from the example page:
Code:
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<style>
body{font:Arial, Helvetica, sans-serif; margin:5px; overflow:hidden}
td{font:Arial, Helvetica, sans-serif;}
a.pager, a.pager:visited {color:#00f;}
a.pager:hover {color:#f00; cursor:hand;}
</style>

<title>Title</title>
</head>
<body>
<table border="2" width="100%" cellspacing="3">
    <tr>
       <td id=pageText width="100%">
        <table width="100%" border="0" cellspacing="2" cellpadding="0">
        <tr>
        <td width="80%" align="center"><strong>Main Title</strong></td>
        <td id="previous" width="10%" align="center">
        <a href="javascript:goPrev()" class="pager">Previous</a></td>
           <td id="next" width="10%" align="center">
        <a href="javascript:goNext()" class="pager">Next</a></td>
        </tr>
        </table>
    </td>
  <tr>
    <td id="pageArea" width="100%" height="200px" align="center">

<div id="page0" Style="display:1;">
Page 0 content
</div>

<div id="page1" Style="display:none;">
Page 1 content
</div>

<div id="page2" Style="display:none;">
Page 2 content
</div>

<div id="page3" Style="display:none;">
Page 3 content
</div>

<div id="page4" Style="display:none;">
Page 4 content
</div>

<div id="page5" Style="display:none;">
Page 5 content
</div>

<div id="page6" Style="display:none;">
Page 6 content
</div>

<div id="page7" Style="display:none;">
Page 7 content
</div>

<div id="page8" Style="display:none;">
Page 8 content
</div>

<div id="page9" Style="display:none;">
Page 9 content
</div>

<div id="page10" Style="display:none;">
Page 10 content
</div>

</td></tr>
</table>

<script>
var i=0;
var npages=11;
 
function goNext()
{
    eval("document.all.page"+i+".style.display='none'");
    i=(((i%npages)+1)%npages);
    eval("document.all.page"+i+".style.display=''");
}

function goPrev()
{
    eval("document.all.page"+i+".style.display='none'");
    i=(((i%npages)-1)%npages);
    if (i==-1){i=10};
    eval("document.all.page"+i+".style.display=''");
    
}

</script>
</body>
</html>
 

Warf

New Member
Thanks for your reply.

I read a post somewhere, and several people commented that it was a bad idea to build a web-page that NEEDED Javascript in order to work, and it was better to use PHP instead.

I would like my page to be viewable on as many devices as possible, and wasn't sure my old Javascript solution was still a viable option.

If my old code is still valid, then I'm happy to use it, because it works nicely for what I want to do.

Cheers,
Norm.
 

Warf

New Member
Thanks for enlightening me, I will go ahead and use the old Javascript for the new page!
 
Top