Reputation: 2241
With this html:
<html>
<head>
<meta charset="UTF-8">
<title>Bonoloto</title>
<script src="bonoloto.js"></script>
<style>
table {border-collapse: collapse;}
td{border: 1px solid #000000; text-align: center; width: 6%;}
</style>
</head>
<body>
<script>
tables();
</script>
</body>
</html>
And this javascript:
var counter = 0;
var nr1 = Math.floor(Math.random() * 49 + 1),
nr2 = Math.floor(Math.random() * 49 + 1),
nr3 = Math.floor(Math.random() * 49 + 1),
nr4 = Math.floor(Math.random() * 49 + 1),
nr5 = Math.floor(Math.random() * 49 + 1);
document.write("Numbers: "+nr1+" "+nr2+" "+nr3+" "+nr4+" "+nr5);
function tables(){
document.write("<table>");
for(i = 1; i < 50; i++) {
if(counter == 10) {
counter = 0;
document.write("<tr>");
}
if(i==nr1){
document.write("<td style='background-color: cadetblue'>" + i + "</td>");
}else{
document.write("<td>" + i + "</td>");
}
if(counter == 10) {
counter = 0;
document.write("</tr>");
}
counter++;
}
document.write("</table>");
}
This is the output:
I must highlight all the numbers like 25 is highlighted. Numbers are randomly generated and the aim is to highlight them in the table. I get stuck in here:
if(i==nr1){
document.write("<td style='background-color: cadetblue'>" + i + "</td>");
}else{
document.write("<td>" + i + "</td>");
}
If i place more if statements the table columns will "Multiply". I cant get that condition working properly...
Upvotes: 1
Views: 497
Reputation: 570
You can try this:
var counter = 0;
var randomNumbers = [];
for (var i = 0; i <= 5; i++) {
randomNumbers.push( Math.floor(Math.random() * 49 + 1));
};
document.write("Numbers: ");
for (var i = randomNumbers.length - 1; i >= 0; i--) {
document.write(randomNumbers[i]+", ");
};
function tables(){
document.write("<table>");
for(i = 1; i < 50; i++) {
var found = false;
if(counter == 10) {
counter = 0;
document.write("<tr>");
}
for (var j = randomNumbers.length - 1; j >= 0; j--) {
if(i == randomNumbers[j]){
document.write("<td style='background-color: cadetblue'>" + i + "</td>");
found = true;
break;
}
};
if(!found){
document.write("<td>" + i + "</td>");
}
if(counter == 10) {
counter = 0;
document.write("</tr>");
}
counter++;
}
document.write("</table>");
}
tables();
Upvotes: 0
Reputation: 2307
Try this:
HTML:
<div id="container"></div>
JQUERY (as you can see makes things much simpler):
var colors=['red','yellow','blue','green'];
var i;
$("#container").append("<table></table>");
var tds="";
for(i=1;i<=50;i++){
if(i%10 == 0){
tds+="<td style='background:"+colors[Math.floor(Math.random()*10)%4]+"'>"+i+"</td>"
$("table").append("<tr>"+tds+"</tr>");
tds="";
}
else{
tds+="<td style='background:"+colors[Math.floor(Math.random()*10)%4]+"'>"+i+"</td>";
}
}
CSS:
table,td{
border:solid 1px;
}
table{
border-collapse:collapse;
}
td{
width:6%;
}
Upvotes: 0
Reputation: 23416
Instead of nrX
s, use an array of five random numbers. Then in if
, check, if the array contains i
. Something like this:
var counter = 0,
randoms = [],
n;
for (n = 0; n < 5; n++) {
randoms.push(Math.floor(Math.random() * 49 + 1));
}
function tables(){
document.write("<table>");
for(var i = 1; i < 50; i++) {
if(counter == 10) {
counter = 0;
document.write("<tr>");
}
if (randoms.indexOf(i) > -1) {
document.write("<td style='background-color: cadetblue'>" + i + "</td>");
} else {
document.write("<td>" + i + "</td>");
}
if (counter == 10) {
counter = 0;
document.write("</tr>");
}
counter++;
}
document.write("</table>");
}
tables();
document.write
is considered as a bad practice, use some DOM manipulation methods instead. In your case HTMLTableElement Interface seems to be suitable.
You can improve the code, since now it's possible to get doubled random numbers to the array.
Upvotes: 1