/    Sign up×
Community /Pin to ProfileBookmark

Can buttons change color on click?

Greetings. I had an idea for a webpage game I thought would be easy to create. I thought that since I had never built a website, done any programming or used a Windows computer before. (Insert humble smily here) I’d spent the last 12 years using Macs. The last 5 months of research and study has given me an appreciation of what you folks know.

Input for my game looks like a simple JS calcuator without the math function buttons. I created a keypad with numbers from 1 to 55 on 55 buttons. Game play I am trying to create; Keyboard is neutral color at the start. Onclick, the first time, it would turn the selected button green and insert that number into a form or array of positive integers. Onclick second time, button on the keypad turns from green to red and shifts that number into a display of negative integers. Onclick 3 it returns to neutral color and removes the number from the display. The color change is to let players know which numbers have already been selected. No number can be used twice. Each display/array is limited to 5 of the 55 integers. Numbers will be downloaded into a MySQL database then scored.

I have seen tutorial sites with code to change background color of a page onclick. Is there a way to make a button change color onclick? Alternative would be to have just the digit on the button change color onclick by changing font color if that is possible.

Thanks for any feedback or suggestions. DocFont

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@TheBearMayNov 15.2006 — <button id="clrBtn" onclick="clrChg(this.id)">Test</button>
<script type="text/javascript">
var clrArr = ["#00ff00","#ff0000", "#f0f0f0"]; <br/>
var arrInx=0;
function clrChg(eId){
document.getElementById(eId).style.background=clrArr[arrInx];
arrInx++;
if (arrInx &gt;= clrArr.length) arrInx = 0;
}
&lt;/script&gt;
×

Success!

Help @DocFont spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...