button won't change color

Question

I have made 30 buttons in JavaScript now I want all buttons to be green like the first button and whenever you click on a button it turns and stays red.

For some reason only the first button is green and whenever I click it it won't turn red. I tried using: button.style.backgroundColor = "red"; in a function to make the button red when clicked but this doesn't work

const color = ["green"];

page();

function onbuttonclicked() {
  document.body.style.backgroundColor = color[nr - 1];
}

function page() {
  document.body.style.backgroundColor = "grey";
  //style page

  createButtons(30);
}

function set_onclick(amount) {
  for (var a = 1; a < (amount + 1); a++) {
    document.getElementById("button" + a).setAttribute("onclick", "onbuttonclicked(" + a + ")");
  }
}

function createButtons(amount) {
  for (var a = 1; a < (amount + 1); a++) {

    var button = document.createElement("button");
    button.style.backgroundColor = color[a - 1];
    button.id = "button" + a;
    button.innerHTML = "button " + a;
    container.appendChild(button);
  }
  set_onclick(amount);
}

<div id="container"></div>

EDIT thanks for all the answers it isnt possible to only change certain buttons when you click on them right? so when i click on button1 nothing happens but whenever i click on button 3 it turn red

You're setting the background color of the `body` to `undefined` in `onbuttonclicked` (since `nr` is undefined). — Heretic Monkey, Jan 04 '21 at 12:37
You should start by verifying the console or the execution of your code snipet. `Uncaught ReferenceError: nr is not defined` is enough information to solve your issue. — DatGeoudon, Jan 04 '21 at 12:42

dippas · Answer 1 · 2021-01-04T12:49:49.057

You need to pass nr as a parameter in onbuttonclicked function

EDIT:

OP Comment:

okay so i need to add an parameter. but i want all 30 buttons to be green so when you open the page all buttons are green this also has to do with the parameter?

For that in your loop createButton, change color[a - 1] for color[0]

const color = ["green"];

function onbuttonclicked(nr) {
  document.body.style.backgroundColor = color[nr - 1];
}

function page() {  
//style page
  document.body.style.backgroundColor = "grey";
  createButtons(30);
}

function set_onclick(amount, nr) {
  for (let a = 1; a < (amount + 1); a++) {
    document.getElementById(`button${a}`).setAttribute("onclick", `onbuttonclicked(${nr})`);
  }
}

function createButtons(amount) {
  for (let a = 1; a < (amount + 1); a++) {

    const button = document.createElement("button");
    button.style.backgroundColor = color[0];
    button.id = `button${a}`;
    button.innerHTML = `button ${a}`;
    container.appendChild(button);
  }
  set_onclick(amount, 1);
}

page();

<div id="container"></div>

okay so i need to add an parameter. but i want all 30 buttons to be green so when you open the page all buttons are green this also has to do with the parameter? — , Jan 04 '21 at 12:40

Lee · Answer 2 · 2021-01-04T12:49:47.880

A common way to do this is to use CSS classes:

    
page();
    
function onbuttonclicked(a) {
  //document.body.style.backgroundColor = color[nr - 1];
  document.getElementById("button" + a).classList.remove("button")
  document.getElementById("button" + a).classList.add("clickedbutton")
}

function set_onclick(amount) {
  for (var a = 1; a < (amount + 1); a++) {
    document.getElementById("button" + a).setAttribute("onclick", "onbuttonclicked(" + a + ")");
  }
}
    
    function page() {
        document.body.style.backgroundColor = "grey";
        //style page
    
        createButtons(30);
    }
    
    
    function createButtons(amount){
        for (var a = 1;a <(amount + 1); a++) {
           
           var button = document.createElement("button"); 
           button.classList.add("button")
           button.id = "button" + a; 
           button.innerHTML = "button " + a; 
           container.appendChild(button);
        }
        set_onclick(amount);

    }

.clickedbutton {
background-color: red;
}

.button {
background-color: green;
}

<div id="container"></div>

score 0 · Accepted Answer · answered Jan 04 '21 at 12:46

const number_of_buttons = 30;

createButtons();

function createButtons(){
  var container = document.getElementById("container");
  for(var i=1;i<=number_of_buttons;i++){
    var button = document.createElement("button");
    button.innerText = "Button " + i;
    button.style.backgroundColor = "green";
    button.onclick = function(event){
      var source = event.target || event.srcElementl
      source.style.backgroundColor = "red";
    };
    container.appendChild(button);
  }
}

button{
  margin: 10px;
  font-family: 'Consolas';
  font-size: 20px;
  padding: 5px;
  outline: none;
  cursor: pointer;
  transition: 0.5s;
}

button:hover{
  border: 1px solid black;
}

button:active{
  transform: translateY(2px);
}

<div id="container">
</div>

This is what you have asked for!

I did the styling for better looks!

oh wow thats even better than how i wanted to do it – Jan 04 '21 at 12:46 — , Jan 04 '21 at 12:46

score 0 · Answer 4 · answered Jan 04 '21 at 12:47

This line: button.style.backgroundColor = color[a - 1]; is wrong, since your color array only contains a single string ("green"). You should do color[0], or, you need to populate the array to have 30 elements.
document.body.style.backgroundColor = color[nr - 1]; - Where is this nr variable came from? The correct line should be button.style.backgroundColor = "red"; or - again - you can populate the color (i.e const color=["green", "red"]) and use color[1].

Check out this demo

button won't change color

4 Answers4