How to change a color of a button by click

Question

I want to change the color of a button on click I used this code but it does not work

onclick => myFunction();
function myFunction() {
  document.getElementById('#"+buttonId+"').style.color = "red";
}

Answer 1

Setting the colour &/or background colour is fairly straightforward using hardcoded values but does not lend itself well to re-use or template changes as you then need to edit the references to the hardcoded colours used. Both buttons below set the same colours but the second uses a class which can have different styles depending upon whatever stylesheet happens to declare that class. Neither button has an inline event handler - the preferred method is to assign event handlers externally which has similar benefits to using stylesheets ~ it keeps the HTML markup cleaner, allows for reuse and changes made in one place affect all instances if the js is within a separate file.

document.querySelector('[name="bttn-x"]').onclick=function(e){
  this.style.color='red';
  this.style.backgroundColor='yellow';
}

document.querySelector('[name="bttn-y"]').onclick=function(e){
  this.classList.toggle('fancy');
}

[type='button']{
  padding:0.5rem;
  transition:all ease-in-out 500ms;
}
.fancy{
  background:yellow;
  color:red;
  animation-name:fancybttn;
  animation-duration:0.5s;
}
@keyframes fancybttn{
   from{transform:scale(1)}
   30%{transform:scale(1.1)}
   to{transform:scale(1)}
}

<input name='bttn-x' type='button' value='Please click me' />

<input name='bttn-y' type='button' value='Or click me' />

Answer 2

First, The Mozilla Developer Network is a great resource for DOM manipulation as can be seen here. The following is a link to the MDN site:

https://developer.mozilla.org/en-US/docs/Web/JavaScript

Here is an example using the addeventlistener method from the MDN site.

const buttonElement = document.getElementById('btn');
buttonElement.addEventListener('click', function (event) {
  event.target.style.backgroundColor = "red";
});

First, store the id of the element that will contain the event,'btn', in a variable, then call the addEventListener() method on the buttonElement variable. The first argument, 'click', defines the event type. The second argument is a function containing the event actions. Hope this helps.

EDIT: Another user pointed out you wanted to change the background color, not the text color. I misread your question, and I think most of the others did, too. I updated my answer.

Answer 3

Well you got many answers, will cover few extra things.

rather writing concatenation like this :

document.getElementById('#"+buttonId+"').style.color = "red";

you can use ES6 template literals :

document.getElementById(`${buttonId}`).style.color = "red";

And to keep things simpler, i would be solving it something like this:

const button = document.getElementById('id');
button.onclick = ()=> { .   // you can attach event as a property as well.
 button.style.color="red";
} 

(you don't need to attach onclick attribute to your button markup this way makes mark-up much cleaner)

i am not suggesting it is the best way but it is much compact.

Answer 4

The answer is that you should use only button ID without hash mark or quotes in the getElementById. The correct line should be as follows (of course buttonId must be initialized):

document.getElementById(buttonId).style.color = "red";

Answer 5

To make it work properly you should pass de this object or the element id into your function. The code would be something like this:

function myFunction(event) {
  buttonId = event.id;
  document.getElementById(buttonId).style.color = "red";
}

<button id='some-id' onclick=myFunction(this)>
  Button 1
</button>

<button id='other-id' onclick=myFunction(this)>
  Button 2
</button>

If you want to play around with this code you can go to: https://codepen.io/mjimenezmartin/pen/MWYzNrM?editors=1111 and try different stuff.

Answer 6

ES5-

var buttonId = document.getElementById("buttonId") // Put your button Id

buttonId.addEventListener("click", function() {
   buttonId.style.color = "red";
})

ES5+

const buttonId = document.getElementById("buttonId") // Put your button Id

buttonId.addEventListener("click", () => {
   buttonId.style.color = "red";
})

Answer 7

document.getElementById(buttonId).addEventListener('click', (event) => {
  event.target.style.color = "red";
});

addEventListerner is a better practice than using event attributes in HTML, i advise you to try with it (either if you can't use it in your situation) Also in getElementById you can't use the # caracter as CSS

https://developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener https://developer.mozilla.org/fr/docs/Web/API/Event

Also if you want to change the color button and not only the text color, the property "color" will not be the good one, but as we don't know how your button is made, we can't really help you on this side

Answer 8

function myFunction() {
  document.getElementById(buttonId).style.color = "red";
}

• Don't use the # in the document.getElementById
• If you want to use # then try with document.querySelector or document.querySelectorAll

Answer 9

const changeColor = ()=>{
  const button = document.getElementById('button');
  button.style.color = 'red'
}

<button id="button" onclick="changeColor()">Click me</button>

Answer 10

Please try this

function myFunction() {
    document.getElementById('myButton').style.color = "red";
}

<button id="myButton" onClick="myFunction()">Change Color</button>

Answer 11

I think buttonIdis undefined or wrong.

Try this:

onclick => myFunction();

function myFunction() {
    var buttonId = 'myButton';
    document.getElementById(buttonId).style.color = "red";
}

and in the HTML:

<button id="myButton">hello I am the button</button>