Keeping second variable value “one behind” first variable value in javascript

Question

I am setting up a bingo call board system for my local senior center on a laptop (without Internet access) to be used through a screen projector system. I am doing it in a locally saved html file to open in a webbrowser, and I already have most of the system working together fine.

For the "all called balls" display, I have an HTML table setup with all the bingo numbers as clickable fields to input into a variable. This is done through jquery by using the following:

$(document).ready(function() {
$("tbody td").click(function(e) {

var currentCellText = $(this).text();

I then add the correct BINGO letter prefix to the called number by using this:

if (currentCellText < 16)
{
    var bingoletter = "B";
}
else if (currentCellText < 31 && currentCellText > 15)  
{  
    var bingoletter = "I";  
}  
else if (currentCellText < 46 && currentCellText > 30)
    var bingoletter = "N";  
}  
else if (currentCellText < 61 && currentCellText > 45)  
{  
    var bingoletter = "G";  
}  
else if (currentCellText < 76 && currentCellText > 60)  
{  
    var bingoletter = "O";  
}  
else  
{  
    var bingoletter = ""; 
    var currentCellText = "";
}  


var currentnumber = ("<BIG><BIG><BIG><BIG><BIG><B><CENTER>" + bingoletter + currentCellText + "<br/>");

document.getElementById("currentnumber").innerHTML = currentnumber; 

I have to include the HTML code here as if I try to put it into the actual table, everytrhing breaks. Not sure why...

I then display the called number by using this table cell in a separate table display (not an alert box):

<td id="currentnumber" width="50%" rowspan="2"></td>

I also have a separate javascript that also changes the background color of each table cell when I click on the number so as to have a display of numbers already called. This works fine, along with the jquery that displays the currently called number in a larger font display separately.

Everything is working fine, but what I am stuck on is trying to get another, second, variable that would display the last number called. What this has to do is display the last number called when a new number is clicked upon as the current number called. I have a table display setup, all I have to figure out is the proper coding to be one behind the current. In other words, this second variable would hold the value of the current number called variable "one behind" the actual current number variable. ie I click on B6 in the html table so B6 background changes color in the main display table and B6 is displayed in a separate called number table cell (all works fine up to here) and the "last number called" cell is blank as no prior numbers have been called yet, when I click on I21 as the current number called, I want B6 to show up in the Last Number called variable. And so on as G60 is clicked on to be the next current number, then last number should show I21.

Many thanks in advance, Stan...

Answer 1

Try this:

document.getElementById("lastnumber").innerHTML = document.getElementById("currentnumber").innerHTML;

immediately before you set the contents of currentnumber . The idea is just to copy whatever you were showing last just before you change it the new text. Obviously, you'll need to change lastnumber to whatever you've called the cell you want the last number called in.

Answer 2

You need to store the currentCellText outside the click function so that it retains its value. Initialise it to an empty string to start with.

$(document).ready(function() {

var currentCellText = "";

$("tbody td").click(function(e) {

Then create a second variable (let's say lastCellText ). Again initialise this to an empty string outside of the click function.

$(document).ready(function() {

    var currentCellText = "";
    var lastCellText = "";

    $("tbody td").click(function(e) {

Then in the click function, simply store the value of currentCellText into lastCellText before updating the value of currentCellText with $(this).text()

$("tbody td").click(function(e) {

    lastCellText = currentCellText;
    currentCellText = $(this).text();

Hope this helps.