square that changes color when clicked

LearningJS · 10-17-2012, 04:47 PM

Hi!!

I need a simple javascript/ajax code to make a simple square change color (about 5 different colors) every time you click without refreshing the page.

I just have the css of the square.
<style>
#square{position:absolute; width:50px; height:50px; background-color:#000000;}
</style>

Appreciate any help

xelawho · 10-17-2012, 05:26 PM

Code:

<body>
<div onclick="changeCol(this)" id="square"></div>
<script type="text/javascript">
var count=0;
function changeCol(thediv){
var colors=["red", "blue","green","yellow","orange"]
thediv.style.backgroundColor=colors[count++%colors.length]
}
</script>
</body>

LearningJS · 10-17-2012, 06:09 PM

Thank you so much!!!!
works perfectly