按钮不会改变颜色

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

Answer 1

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>

Answer 2

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>

Answer 3

 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!

Answer 4

1. 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.
2. 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 (ie const color=["green", "red"] ) and use color[1] .

Check out this demo