Member Avatar for minghags

Hello i just want to ask you guys if you can help me with this problem: I need to write an javascript that writes out chess board like table, and that table must include onclick function that changes background color of that cell that is clicked on. I would really appreciate any help. This is what i got so far:

<html>
    <head>
        <title>Vaja 6.2</title>
        <style type="text/css"> 
            #table tr:nth-child(even) td:nth-child(odd),
            #table tr:nth-child(odd) td:nth-child(even)
            {
                background-color: green;
            }
            </style>
        <script type="text/javascript">

            function enterSize()
                {
                x=prompt("Enter width:")
                y=prompt("Enter height:")
                
                for(var i=0; i<x; i++)
                {
                    document.write("<table id=table border=1 cellpadding=0 cellspacing=0>")
                    document.write(" <tr>")
                    
                    for (var j=0; j<y; j++)
                    {
                        
                        document.write(" <td width=40 height=40>")
                        document.write(" </td>")
                         
                    }
                    document.write(" </tr>")
                    document.write("</table>")                }

    
            }
            </script>
    </head>
    <body >
        <div><script>
            enterSize();
            </script></div>

        
    </body>
</html>

Thanks

Edited by minghags because: n/a
  • 2 Contributors
  • 19 Replies
  • 275 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by hiddepolen
Member Avatar for hiddepolen

I thinking I'd use jQuery to select each square, and change the color. In your for loops you can generate IDs for your squares.

Member Avatar for minghags

I thinking I'd use jQuery to select each square, and change the color. In your for loops you can generate IDs for your squares.

Is there anyway you can help me with code? I never used jquery before. Thanks in advance.

Member Avatar for hiddepolen

jQuery is not hard to learn (Tutorials and download: http://jquery.com/).
Look into some tutorials, and see what works out and where the problems come up, I'll be able to help you with that.

The ID generation in the code can be done like this:

for (var j=0; j<y; j++)
                    {
                        
                        document.write(" <td width=40 height=40 id='"+i*x+j+"'>")
                        document.write(" </td>")
                         
                    }
Member Avatar for minghags

thanks i did it. but now i have problem with odd/even background color. it colors every second cell and in every row same. but i need like chess board. thanks in advance.

Member Avatar for hiddepolen

OK, modified it a bit:

<html>
    <head>
        <title>Vaja 6.2</title>
        <script type="text/javascript">

            function enterSize()
                {
                x=prompt("Enter width:")
                y=prompt("Enter height:")
                
                for(var i=0; i<x; i++)
                {
                    document.write("<table id=table border=1 cellpadding=0 cellspacing=0>")
                    document.write(" <tr>")
                    
                    for (var j=0; j<y; j++)
                    {
                        document.write(" <td width=40 height=40 class='cell' id='cell" + (i*x+j) + "'>")
                        document.write(" </td>")
                    }
                    document.write(" </tr>")
                    document.write("</table>")                }

    
            }
            </script>
            <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body >
        <div><script>
            enterSize();
			for (var i=0; i<x; i++) {
				for (var j=0; j<y; j++) {
					if ((i+j) %2 == 0)
						$('#cell'+(i*x+j)).css('backgroundColor', '#0F0');
				}
			}
            </script></div>

        
    </body>
</html>

Please start thinking a little for yourself. I'm sure you could have managed to think of this yourself.

Member Avatar for minghags

Yeah i did, but that doesn't get through my brain :D Sorry look what happens if you input y bigger than x... Thanks for this tho

Member Avatar for hiddepolen 
if ((i+j) %2 == 0)
						$('#cell'+(i*x+j)).css('backgroundColor', '#0F0');

In the above code I check for i+j%2 == 0. This is only valid for situations with a square board, or a board with x=k*2+y, where k is any whole number.

Think of something yourself that is valid for any y, probably a bit harder, but definately manageble I think.

Member Avatar for minghags

I went like this now. But one huge problem is, that when i click green box it goes first grey and then red and then grey again. I would have to do that it would go green-red-green and grey-red-grey. I hope someone would help me thanks in advance.

Code:

<html>
    <head>
        <title>Vaja 6.2</title>

        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            
            function zamenjaj(sivo) {
                if ((sivo.style.backgroundColor == "") || (sivo.style.backgroundColor == ""))
                {
                    sivo.style.backgroundColor = "red";
                }
                else
                {
                    sivo.style.backgroundColor = "";
                }
                
            }
            
            
            
            function vpisVelikosti()
                {
                x=prompt("Vnesi stevilo dolžino:")
                y=prompt("Vnesi stevilo širino:")
                
                for(var i=0; i<x; i++)
                {
                    document.write("<table border=0  cellpadding=1 cellspacing=1>")
                    document.write(" <tr>")

                    for (var j=0; j<y; j++)
                    {
                        document.write("<td width=40 height=40 class='cell' bgcolor=grey id='cell" + (i*x+j) + "' onclick=zamenjaj(this)>")
                        document.write(" </td>")
                    }
                    document.write(" </tr>")
                    document.write("</table>")                
                }

    
            }
            </script>
    </head>
    <body >
        <div><script>
            vpisVelikosti();
            for (var i=0; i<x; i++) {
				for (var j=0; j<y; j++) {
					if ((i+j) %2 == 0)
                    $('#cell'+(i*x+j)).css('backgroundColor', '#0F0');
				}
			}
            </script></div>

        
    </body>
</html>
Member Avatar for hiddepolen

Formulate the problem.

What do you have, what do you want, so what needs to change. Change exactly that...

Member Avatar for minghags

I tried to change value of:

function zamenjaj(sivo) {
                if ((sivo.style.backgroundColor == "") || (sivo.style.backgroundColor == ""))
                {
                    sivo.style.backgroundColor = "red";
                }
                else
                {
                    sivo.style.backgroundColor = "";
                }
                
            }

but it seems that this bgcolor has to do something with that.

document.write("<td width=40 height=40 class='cell' bgcolor=grey id='cell" + (i*x+j) + "' onclick=zamenjaj(this)>")

I think I would have to do something different with bgcolors... Please help. Thanks

Member Avatar for hiddepolen

OK, you are now mixing three different types of changing the background colour.

- In the HTML, (bgcolor=grey)
- In the jQuery ($('#cell'+(i*x+j)).css('backgroundColor', '#0F0');)
- In your method (sivo.style.backgroundColor = "red";)

I would stick to either plain CSS, jQuery(using $(*).css(), your Javascript (using *.style.*), or HTML. The easiest for the things you want is still jQuery, but plain Javascript you type yourself will also work.
Anyway, I'd definately leave out the HTML, and code that part in CSS.

Member Avatar for minghags

I know you want to be helpful but this doesn't help me :) its ok, will have to search something different. thanks.

Member Avatar for hiddepolen

I do want to help you, but what I am also saying is that if I put down all the code you need, you are not going to learn anything, because the next time you run into this problem, you still won't know the answer...

If you think this thread is finished, please mark it as solved!

Member Avatar for minghags

No its not that, i don't know whats causing that problem... this is the real problem :S sorry but that thread is far from solved :S

Member Avatar for hiddepolen

Like I was saying, you are manipulating the background in three different ways.

Choose 1 of them, so it will not become confusing. Then, think about what you want to change, because that will become very easy.

Member Avatar for minghags

Please help me, I can't figure it out. Im siting like 2h behind this and nothing. I know I have to learn it... but i will through your help. thanks

Member Avatar for hiddepolen

OK, lets go through it.

<html>
    <head>
        <title>Vaja 6.2</title>
        <style>
			.cell {
				background-color: #000;
			}
		</style>
        <script type="text/javascript">

            function enterSize()
                {
                x=prompt("Enter width:")
                y=prompt("Enter height:")
                
                for(var i=0; i<x; i++)
                {
                    document.write("<table id=table border=1 cellpadding=0 cellspacing=0>")
                    document.write(" <tr>")
                    
                    for (var j=0; j<y; j++)
                    {
						var maxVal = x>y ? x : y;
                        document.write(" <td width=40 height=40 class='cell' id='cell" + (i*maxVal+j) + "'>")
                        document.write(" </td>")
                    }
                    document.write(" </tr>")
                    document.write("</table>")                }

    
            }
            </script>
            <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body >
        <div><script>
            enterSize();
			var maxVal = x>y ? x : y;
			for (var i=0; i<x; i++) {
				for (var j=0; j<y; j++) {
					if ((i+j) %2 == 0)
						$('#cell'+(i*maxVal+j)).css('background-color', '#0F0');
					else
					$('#cell'+(i*maxVal+j)).css('background-color', '#FFF');
				}
			}
			$('.cell').click(function () {
				if ($(this).css('background-color') == 'rgb(0, 255, 0)')
					$(this).css ('backgroundColor', 'rgb(255, 0, 0)');
				else if ($(this).css('background-color') == 'rgb(255, 0, 0)')
					$(this).css ('backgroundColor', 'rgb(0, 255, 0)');
				else if ($(this).css('background-color') == 'rgb(255, 255, 255)')
					$(this).css ('backgroundColor', 'rgb(0, 0, 0)');
				else if ($(this).css('background-color') == 'rgb(0, 0, 0)')
					$(this).css ('backgroundColor', 'rgb(255, 255, 255)');
			});
            </script></div>
    </body>
</html>

What have I done:
- I made a maxVal for the problem with all the squares when y was bigger than x, and used that instead.
- I used jQuery for handling the clicks. The css function returns an rgb string, so you have to use that.

If you want to write some javascript yourself, go ahead, I like this.
Also, I reccommend trying to understand what I have done. Maybe you will learn something from it?

Edited by hiddepolen because: n/a
Member Avatar for minghags

Thank you very much! I WILL learn from this, i will now try and change that white are changed to red to. Little hard if you want two same colors but i will do it! :) Alone :) thanks again my man. Cheers

Member Avatar for hiddepolen

Great!

If this thread is now solved, please mark it as solved!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.