Serial Listings

Introduction

First of all what do I mean by serial a listing? What I want to do is simply create some buttons, or any other HTML element, with a set of numbers, for example 0 to 9 or letters, for example A - Z or a to z, or any part of that set. In these examples I am going to show how to go through an alphabet incrementing letters. The methods can easily be extended to the full alphabet, in either upper or lower case. These methods can be adapted to produce almost element on a page.

Letters cannot be incremented directly but characters on computers are based on integer character codes. The original character codes were ASCII (American Standard Code for Information Interchange) but since 2007 the most common encoding scheme on web pages has been UTF-8 (U from Universal Character Set + Transformation Format + 8-bit). Sensibly, it was arranged that the most common characters of UTF-8 and ASCII use the same code. ASCII is a subset of Unicode and UTF-8 is a mapping method. There's an older, but interesting discussion of character sets on Joel Spolsky's web site.

JavaScript

Speed tip: In some of the following functions a for loop is used. The number of iterations depends on the length of the string or number of elements in an array. If (i=0; i<str.length; i++) is used then str.length is evaluated on every loop iteration. If the length is placed in a variable before the loop, then it just has to be calculated once.

When this page was first written there was really just one way of doing this and that was by using JavaScript. But even in JavaScript there were several mothods of doing this.

JavaScript Array

Start with an array of letters. Then use a loop to step through the array doing whatever is needed to the returned value. Here I simply produced some buttons, but any element can be used. By amending what the JavaScript writes to the document the elements can be give a CSS class or ID and styled accordingly, links can be written and so on.

Code


<script type="text/javascript">
const aearray = ["A", "B", "C", "D", "E"];
aearrayLen = aearray.length;
btnStr = "";
for (i = 0; i < aearrayLen; i++){
	btnStr	= btnStr + " <button type='button' id='" + aearray[i] + "'> " + aearray[i] + "</button> ";
}
document.getElementById("aeBtns").innerHTML = btnStr;
</script>

JavaScript Map

What map does is transform an array into another array. Here it sends every element of the new array to a function to write the buttons.

Code

In the code below, the .join("") is used to suppress the commas that would otherwise separate the buttons.


<script type="text/javascript">
const fjarray = ["F", "G", "H", "I", "J"];
document.getElementById("fjBtns").innerHTML = fjarray.map(makeFJButtons).join("");

function makeFJButtons(item) {
  return (" <button type='button' id='" + item + "'> " + item + "</button> ");
}

JavaScript Reduce

What reduce does is execute a callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

Code


<script type="text/javascript">
const koarray = ["K", "L", "M", "N", "O"];
const makeKOButtons = koarray.reduce(function(accum, item) {
    return accum + " <button type='button' id='" + item + "'> " + item + "</button> ";
}, '');
document.getElementById("koBtns").innerHTML = makeKOButtons;
</script>

JavaScript String

A method to reduce typing out an array is to use a string. Extra code will be required to separate single and double digits.

Code


<script type="text/javascript">
var letterStr = "PQRST";
var strLen = letterStr.length;
btnStr = "";
for (i = 0; i < strLen; i++){
	ltr = letterStr.charAt(i)
	btnStr	= btnStr + " <button type='button' id='" + ltr + "'> " + ltr + "</button> ";
}
document.getElementById("ptBtns").innerHTML = btnStr;
</script>

JavaScript Character Codes

Even easier is to let the code produce the characters itself using the ASCII / Unicode character codes. The ASCII decimal codes for A to Z are 65 to 90. For lowercase they are 97 to 122. The full character sets are everywhere and easy to find. Any type of loop can be used, whichever is more convenient.

Code


<script type="text/javascript">
btnStr = "";
for (i = 85; i < 91; i++){
	ltr = String.fromCharCode(i);
	btnStr	= btnStr + " <button type='button' id='" + ltr + "'> " + ltr + "</button> ";
}
document.getElementById("uzBtns").innerHTML = btnStr;
</script>

String.fromCharCode() is static in that String cannot be a variable but it can accept numeric variables or comma separated multiple values as arguments. Maths can be carried out in these operations. The code for "A" is 65, but we can use String.fromCharCode(65 + 1) which gives "B".

JavaScript Incrementing and Decrementing Numbers

This should be obvious as it is used all the time in for loops, but is sometimes missed when incrementing or decrementing numbers or carrying out multiplication or division operations on them.

The start of a for loop is often written as:

for (i = 0; i < 10; i++){...}

The i++ simply incrementing the variable i by 1 on every loop. I sometimes forget what this does and still write something like:

counter = counter + 1;

when counter++; is far quicker to write and just as obvious what is happening. Likewise:

counter--;

can be used to decrement a variable by 1. Similarly:

counter += 3; - adds 3 to the variable

counter -= 3; - deducts 3 from the variable

counter *= 3; - multiplies the variable by 3

counter /= 3; - divides the variable by 3

Gotcha

Of course, even with something as seemingly simple as this there is a difference between i++ (postfix form) and ++i (prefix form) and also between i-- (postfix form) and --i (prefix form). It happens because of the way the variables could be used.

If the new value of the variable is to be used as soon as the operation is performed then the prefix form needs to be used. If the operation is to be carried out, but the old value of the variable is to be used, then the postfix form has to be used.

Let's try the above.

The HTML


<button type="button" onClick="div2()">Counter / 2</button>
<button type="button" onClick="dec3()">Counter - 3</button>
<button type="button" onClick="dec1()">Counter - 1</button>
<button type="button" onClick="reset()">Reset Counter</button>
<button type="button" onClick="add1()">Counter + 1</button>
<button type="button" onClick="add3()">Counter + 3</button>
<button type="button" onClick="mult2()">Counter * 2</button>

The JavaScript


<script type="text/javascript">
var count = 2;
document.getElementById('counter').innerHTML = count;
	
function div2() { document.getElementById('counter').innerHTML = count/=2; }
function dec3() { document.getElementById('counter').innerHTML = count-=3; }
function dec1() { document.getElementById('counter').innerHTML = --count; }
function reset() { count=2; document.getElementById('counter').innerHTML = count; }
function add1() { document.getElementById('counter').innerHTML = ++count; }
function add3() { document.getElementById('counter').innerHTML = count+=3; }
function mult2() { document.getElementById('counter').innerHTML = count*=2; }
</script>

In the above example, the prefix forms of ++ and -- are used because the result of the operations need to displayed as soon as the value changes.

CSS Counters

Just when you thought it couldn't get any better, CSS introduced counters. CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage, or to change the numbering on ordered lists.

MDN Web Docs has lots of information on CSS Counters and has a list of all the available counter styles.

In this example, an empty unordered list is restyled and a CSS counter added to each element of it.

The HTML


<div class="cssBtns">
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
</div>

The CSS


<style>
.cssBtns ul {
	list-style-type: none;
	counter-reset: cssCounter 0;
	text-align: center;
} 

.cssBtns ul li {
	border: solid 1px #444;
	color: #000; 
	margin: 0 2px;
	padding: 4px 16px;
	text-align: center;
	display: inline;
	background: #ccc;
}

/* Setting styles for the inner text */
.cssBtns ul li:before {
	counter-increment: cssCounter;
	content: counter(cssCounter, upper-alpha);
}
</style>

CSS Counter Pagination Examples

Skip to page number:

The HTML

The HTML for the above is:


<div class="cssNumberBtns">
<ul>
  <li><a href="https://brisray.com/bristol/castle1.htm" target="_blank"></a></li>
  <li><a href="https://brisray.com/bristol/castle2.htm" target="_blank"></a></li>
  <li><a href="https://brisray.com/bristol/castle3.htm" target="_blank"></a></li>
  <li><a href="https://brisray.com/bristol/castle4.htm" target="_blank"></a></li>
  <li><a href="https://brisray.com/bristol/castle5.htm" target="_blank"></a></li>
  <li><a href="https://brisray.com/bristol/castle6.htm" target="_blank"></a></li>
</ul>
</div>

The CSS

The CSS for the above is:


<style>
.cssNumberBtns ul {
	list-style-type: none;
	counter-reset: cssCounter 0;
	text-align: center;
} 
	
.cssNumberBtns ul li {display: inline-block }

.cssNumberBtns ul li a{
	border: solid 1px #444;
	color: #000; 
	margin: 0 2px;
	padding: 8px 16px;
	text-align: center;
	background: #ffe4c4;
	border-radius: .6em;
	text-decoration: none;
}
	
.cssNumberBtns ul li a:hover {background-color: #00FFBF;}	

/* Setting styles for the inner text */
.cssNumberBtns ul li a:before {
	counter-increment: cssCounter;
	content: counter(cssCounter, decimal);
}
</style>

Notice in the above HTML and CSS that the links are empty and the <a> tags are given the styling but not so much the <li> ones. This is to allow the clickable area to be the <li> and not just the <a> which would be normal.

If you want to use First and Last then the counter needs to be reset and turned off for those particular elements.

Skip to page number:

The HTML

The HTML for the above is:


<div class="cssFLBtns">
<ul>
  <li><a class="nocount" href="https://brisray.com/bristol/castle1.htm" target="_blank">First</a></li>
  <li><a href="https://brisray.com/bristol/castle2.htm" target="_blank"></a></li>
  <li><a href="https://brisray.com/bristol/castle3.htm" target="_blank"></a></li>
  <li><a href="https://brisray.com/bristol/castle4.htm" target="_blank"></a></li>
  <li><a href="https://brisray.com/bristol/castle5.htm" target="_blank"></a></li>
  <li><a class="nocount" href="https://brisray.com/bristol/castle6.htm" target="_blank">Last</a></li>
</ul>
</div>

The CSS

The CSS for the above is:


<style>
.cssFLBtns ul {
	list-style-type: none;
	counter-reset: cssCounter 1;
	text-align: center;
} 
	
.cssFLBtns ul li {display: inline-block }

.cssFLBtns ul li a{
	border: solid 1px #444;
	color: #000; 
	margin: 0 2px;
	padding: 8px 16px;
	text-align: center;
	background: #ffe4c4;
	border-radius: .6em;
	text-decoration: none;
}
	
.cssFLBtns ul li a:hover {background-color: #00FFBF;}	

/* Setting styles for the inner text */
.cssFLBtns ul li a:not(.nocount)::before {
	counter-increment: cssCounter;
	content: counter(cssCounter, decimal);
}
</style>

Notice the small differences between the two codes. The first and last <a> tags are given a different class and excluded from getting the CSS counter code. The CSS counter now starts from 1 instead of 0.

This page created May 11, 2008; last modified February 20, 2023