Javascript how to change the color of a button when clicked?

Question

I am new to Javascript. I want to create a 15x15 table full of buttons and change the color of the button to red when clicking each one. The table is fine but the color is not working.

function createTable(){
    var table = document.createElement('table');
    for(var x = 0; x < 15; x++) {
        var row = table.insertRow();
        for(var y = 0; y < 15; y++) {
            var cell = row.insertCell();
            var button = cell.appendChild(document.createElement('button'));
            var buttID = String('butt' + '_' + x + '_' + y);
            button.setAttribute('id', 'buttID');
            button.setAttribute('onclick', 'mark()');
        }
    }
    document.getElementById('puzzle').appendChild(table);
}

function mark(){
    document.getElementById('buttID').style.color = "red";
}

I am not sure if the button.setAttribute is wrong. I also tried the following way, but the entire table just disappears this time. Any ideas about that?

button.onclick = mark();

Maybe the way I create id for every cell is wrong? I am not sure about that.

Answer 1

This line is wrong and will not work:

document.getElementById('buttID').style.color = "red";

That is attempting to access a button with id equal to the string "buttID", but there is no such button.

But you don't need ids on the buttons at all. Instead, you can set the button's onclick function like this:

button.onclick = mark;

Then, define your mark function like this:

function mark() {
  let button = this; // 'this' is the button that was clicked
  button.style.color = 'red';
}

 function createTable() { var table = document.createElement('table'); for (var x = 0; x < 15; x++) { var row = table.insertRow(); for (var y = 0; y < 15; y++) { var cell = row.insertCell(); var button = cell.appendChild(document.createElement('button')); button.className = 'btn'; button.onclick = mark; } } puzzle.innerHTML = ''; puzzle.appendChild(table); } function mark() { let button = this; button.style.backgroundColor = "red"; } const puzzle = document.getElementById('puzzle');

 .btn { border: none; margin: 0; width: 1em; height: 1em; background-color: white; } body { background-color: #eee; }

 <button onclick="createTable();">Create Table</button> <div id="puzzle"></div>

Answer 2

Change this:

var cell = row.insertCell();
var button = cell.appendChild(document.createElement('button'));
var buttID = String('butt' + '_' + x + '_' + y);
button.setAttribute('id', 'buttID');
button.setAttribute('onclick', 'mark()');

To this:

var cell = row.insertCell();
// Store the reference to the actual button and not the cell that contains it
var button = document.createElement('button');
// Bind the onclick event of the button to your mark function
// Also remember that you only need the parenthesis if you are calling a function, here we are only passing it
button.onclick = mark;
// Add your button to your table cell
cell.appendChild(button);

You will also have to edit your mark function to look like this:

function mark(e){
    e.target.style.background = 'red';
}

This may seem confusing and you are probably asking where that variable 'e' comes from. Basically events like 'onclick' will always pass an event object to their handling functions. By putting a variable in the handling functions parenthesis the event object will automatically be placed into that variable.

The event object has lots of information about the event. You can see all of the information it provides here . The one we want is the 'target' - the element that triggered the event which will be whatever button that was clicked in this case. The target is an HTML element so we can then set it's style.background to a value of 'red'.