CODEWITHSUNDEEP
javascripthtml
Alpha2k
Alpha2k

Reputation: 2241

Making a table with random colored numbers

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:

colored table 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

Answers (3)

Azteca
Azteca

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

Nikunj Madhogaria
Nikunj Madhogaria

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%;
}

Live FIDDLE.

Upvotes: 0

Teemu
Teemu

Reputation: 23416

Instead of nrXs, 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();
Notice, that 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

Related Questions