2016-09-26 3 views
0

Ich habe 10 Buttons und wenn man auf einen davon klickt, sollte der Button seine eigene Hintergrundfarbe auf # B2DD28 ändern. -Wie macht man das?Button: Onclick change own bgcolor

<button type="button" onClick="">time:</button> 
<button type="button" onClick="">length:</button> 
<button type="button" onClick="">position:</button> 

- Ist dies in Javascript möglich?

Antwort

0

Eine Möglichkeit, dies zu tun, ist eine CSS-Style Klasse erstellen

.myColor {background-color: # B2DD28; }

und fügen Sie diese Klasse bei Klickereignissen für jede Schaltfläche hinzu. So etwas wie

$ (this) .addClass (myColor)

+0

brauchen ein wenig mehr Code - so etwas wie und fehlt in Ihrer Probe. – Heiko

2

Sie können innerhalb dieser Taste ITSEF verwenden ..

<button type="button" onClick="this.style.background = 'red'">time:</button> 
0

nehmen bitte einen Blick auf diese Probe ich es gemacht ist geschrieben in reinem Javascript nicht Jquery.

<button type="button" onClick="changeColor(this)">time:</button> 
 
<button type="button" onClick="changeDynamicColor(this, 'blue')">length:</button> 
 
<button type="button" onClick="changeDynamicColor(this, 'green')">position:</button> 
 

 

 
<script> 
 

 
function changeColor(e){ 
 

 
\t e.style.backgroundColor = "#B2DD28"; 
 
    
 
} 
 

 
function changeDynamicColor(e, color){ 
 

 
\t e.style.backgroundColor = color; 
 
    
 
} 
 

 

 
</script>

0

Here's eine relativ trivial ereignisunabhängig und selbst nicht bewusst alternative Art und Weise, es zu tun, wenn Sie so geneigt sind ... Es ist wahrscheinlich besser, eine richtige Event-Handler-Registrierung zu verwenden Modell von JavaScript (addEventListener) oder ein Framework wie JQuery zur Verfügung gestellt. :)

function derp() { 
 
    document.activeElement.style.backgroundColor = '#B2DD28'; 
 
}
<button type="button" onclick="derp()">time:</button> 
 
<button type="button" onclick="derp()">length:</button> 
 
<button type="button" onclick="derp()">position:</button>

Klicken Sie einfach auf 'Run-Code-Snippet' oben und dann die Tasten klicken, um sie den #B2DD28 Grünton zu sehen drehen. :)