In the process of creating a party game similar to Tambola or Housie, I am faced with the challenge of automatically detecting and highlighting the numbers called out on each ticket in the game. For instance, if number 86 is announced, I aim to visually distinguish it by changing the font color or background color on tickets numbered 2 and 3 accordingly. The complexity arises from the fact that these tickets are presented as HTML elements copied from another source where they are initially generated. Hence, I seek a solution that can pinpoint these numbers and apply individual styling to them. Any assistance provided would be greatly valued.
The tables displayed under "current nos." in the image represent tambola tickets containing random numbers generated using a particular function. It's important to note that these numbers are not within my direct control. The primary goal is to identify whether the numbers declared by the game host (e.g., 1, 3, 45, 46, 48, 49, 50, 86, 87, 90) exist in each ticket and modify the appearance of those specific numbers on the respective tickets.
To aid in identifying these numbers easily, I have included spaces between each number in the table, positioned before and after the numerical values. Thus, querying $(#tickets).text() results in an output such as:
- 1 32 54 72 81... and so forth (referencing the image).
Below is a snippet of the code I've developed for this task:
<body>
<div id='tickets' style="font-size: 40px">
</div>
<script>
var array = [];
var num = [1,3,45,46,48,49,50,86,87,90] //numbers retrieved from local storage
var clonetkt = localStorage.getItem("checktiks"); //replicating ticket data as HTML from external webpage
for (i = 1; i <= 90; i++) {
array.push(i);
}
for (a = 0; a <= num.length; a++) {
for (b = 0; b < 90; b++) {
if (array[b] == num[a]) {
array[b] = 0;
}
}
}
function recreateTable() {
$('#tickets').html(clonetkt); //rendering ticket tables as HTML
var z;
var n;
if (array[i - 1] == 0) {
z= " " + i + " "; //inserting spaces to match table elements
n = $('#tickets').text();
$('#tickets').each(function(){ //attempting to match table elements but only effective for first occurrence
n = $('#tickets').text().indexOf(z);
if (n >=0){
console.log($('#tickets').text()[n+1] + $('#tickets').text()[n+2]); //verification of number detection in #tickets
}
});
}
}
recreateTable();
</script>
</body>
Your support and expertise on this matter will be highly appreciated!
https://i.sstatic.net/CiLUx.png
Access the .js file for ticket generation via the following link: https://drive.google.com/file/d/1CxmEO1jBOVft6y68BZyuXBAAby7lXwi2/view?usp=drivesdk