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