Very newbie question - about clicking on a square and having it change colour

[cliftonbazaar]

Hi all,

 

Sorry about the noob question but I have never programmed in Javascript (PHP and HTML  ).

 

I wish to have squares (3 wide by 3 deep), and when I click on a square the background colour changes (without reloading the page).  Can this be done in Javascript?  and if so where should I go to learn how to do this?

 

Please don't post the answer as I wish to learn how to do it (if it can be done).  Just a simple link to a page that shows me how to do it is fine.

 

James

[denno020]

This is how I would approach your problem, it might not be the right way, or the most efficient way, but it will be a start:

 

Make each square a submit button for a form.

Add onSubmit to each of the forms, but no action.

Your onSubmit will call a function that will change the background colour of the square.

 

You will need to google:

How to make an image a submit button for a form.

How to use the onSubmit functionality of a form.

How to change the colour of a div using javascript (assuming the squares are divs, either way, you need to research how to change something using javascript).

 

That should just about get you what you want..

 

Denno

[KevinM1]

You don't need a form at all to do this.  That would be overkill, not to mention that forms are used to submit data, not handle UI changes.

 

All you need to do is attach an onclick event to each square.  Inside that click event's handler function, have it grab a hold of the current page background color and change it to whatever you want.  It's a couple of lines of code, depending on exactly how you have it set up.

 

The particular details rely on how exactly you want this to be structured in your HTML.  So, if you can supply some sample code, I can point you in the right direction.