How to add and remove a class when you click on the element

Question

Without using JQUERY I need to be able to change the css class on a div in a table. The following link will show you what the table looks like https://jsfiddle.net/7gwktgxz/

I need to be able to click on a space and it removes the last element of the class, and adds a new one. I need to be able to get the id of the div and change the class of that div (or something similar to that)

Here is the HTML

<table class="othello-board" cellspacing="0">
        <tr class="base white">
            <th colspan="8">
                <div class="base-pieces-wrapper">
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                    <div class="base-piece white"> </div>
                </div>
            </th>
        </tr>
        <tr class="game-row">
            <td> <div class="othello-piece none" id="tile-1-1"> </div> </td>
            <td> <div class="othello-piece none" id="tile-1-2"> </div> </td>
            <td> <div class="othello-piece none" id="tile-1-3"> </div> </td>
            <td> <div class="othello-piece none" id="tile-1-4"> </div> </td>
            <td> <div class="othello-piece none" id="tile-1-5"> </div> </td>
            <td> <div class="othello-piece white" id="tile-1-6"> </div> </td>
            <td> <div class="othello-piece none" id="tile-1-7"> </div> </td>
            <td> <div class="othello-piece none" id="tile-1-8"> </div> </td>
        </tr>
        <tr class="game-row">
            <td> <div class="othello-piece none" id="tile-2-1"> </div> </td>
            <td> <div class="othello-piece none" id="tile-2-2"> </div> </td>
            <td> <div class="othello-piece none" id="tile-2-3"> </div> </td>
            <td> <div class="othello-piece none" id="tile-2-4"> </div> </td>
            <td> <div class="othello-piece white" id="tile-2-5"> </div> </td>
            <td> <div class="othello-piece none" id="tile-2-6"> </div> </td>
            <td> <div class="othello-piece none" id="tile-2-7"> </div> </td>
            <td> <div class="othello-piece none" id="tile-2-8"> </div> </td>
        </tr>
        <tr class="game-row">
            <td> <div class="othello-piece none" id="tile-3-1"> </div> </td>
            <td> <div class="othello-piece none" id="tile-3-2"> </div> </td>
            <td> <div class="othello-piece none" id="tile-3-3"> </div> </td>
            <td> <div class="othello-piece white" id="tile-3-4"> </div> </td>
            <td> <div class="othello-piece black" id="tile-3-5"> </div> </td>
            <td> <div class="othello-piece none" id="tile-3-6"> </div> </td>
            <td> <div class="othello-piece none" id="tile-3-7"> </div> </td>
            <td> <div class="othello-piece none" id="tile-3-8"> </div> </td>
        </tr>
        <tr class="game-row">
            <td> <div class="othello-piece none" id="tile-4-1"> </div> </td>
            <td> <div class="othello-piece none" id="tile-4-2"> </div> </td>
            <td> <div class="othello-piece white" id="tile-4-3"> </div> </td>
            <td> <div class="othello-piece white" id="tile-4-4"> </div> </td>
            <td> <div class="othello-piece black" id="tile-4-5"> </div> </td>
            <td> <div class="othello-piece black" id="tile-4-6"> </div> </td>
            <td> <div class="othello-piece none" id="tile-4-7"> </div> </td>
            <td> <div class="othello-piece none" id="tile-4-8"> </div> </td>
        </tr>
        <tr class="game-row">
            <td> <div class="othello-piece none" id="tile-5-1"> </div> </td>
            <td> <div class="othello-piece none" id="tile-5-2"> </div> </td>
            <td> <div class="othello-piece none" id="tile-5-3"> </div> </td>
            <td> <div class="othello-piece black" id="tile-5-4"> </div> </td>
            <td> <div class="othello-piece white" id="tile-5-5"> </div> </td>
            <td> <div class="othello-piece black" id="tile-5-6"> </div> </td>
            <td> <div class="othello-piece black" id="tile-5-7"> </div> </td>
            <td> <div class="othello-piece none" id="tile-5-8"> </div> </td>
        </tr>
        <tr class="game-row">
            <td> <div class="othello-piece none" id="tile-6-1"> </div> </td>
            <td> <div class="othello-piece none" id="tile-6-2"> </div> </td>
            <td> <div class="othello-piece none" id="tile-6-3"> </div> </td>
            <td> <div class="othello-piece none" id="tile-6-4"> </div> </td>
            <td> <div class="othello-piece none" id="tile-6-5"> </div> </td>
            <td> <div class="othello-piece black" id="tile-6-6"> </div> </td>
            <td> <div class="othello-piece black" id="tile-6-7"> </div> </td>
            <td> <div class="othello-piece none" id="tile-6-8"> </div> </td>
        </tr>
        <tr class="game-row">
            <td> <div class="othello-piece none" id="tile-7-1"> </div> </td>
            <td> <div class="othello-piece none" id="tile-7-2"> </div> </td>
            <td> <div class="othello-piece none" id="tile-7-3"> </div> </td>
            <td> <div class="othello-piece none" id="tile-7-4"> </div> </td>
            <td> <div class="othello-piece none" id="tile-7-5"> </div> </td>
            <td> <div class="othello-piece none" id="tile-7-6"> </div> </td>
            <td> <div class="othello-piece none" id="tile-7-7"> </div> </td>
            <td> <div class="othello-piece none" id="tile-7-8"> </div> </td>
        </tr>
        <tr class="game-row">
            <td> <div class="othello-piece none" id="tile-8-1"> </div> </td>
            <td> <div class="othello-piece none" id="tile-8-2"> </div> </td>
            <td> <div class="othello-piece none" id="tile-8-3"> </div> </td>
            <td> <div class="othello-piece none" id="tile-8-4"> </div> </td>
            <td> <div class="othello-piece none" id="tile-8-5"> </div> </td>
            <td> <div class="othello-piece none" id="tile-8-6"> </div> </td>
            <td> <div class="othello-piece none" id="tile-8-7"> </div> </td>
            <td> <div class="othello-piece none" id="tile-8-8"> </div> </td>
        </tr>
        <tr class="base black">
            <th colspan="8">
                <div class="base-pieces-wrapper">
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                    <div class="base-piece black"> </div>
                </div>
            </th>
        </tr>
    </table>

Answer 1

I would use replace() and event delegation. Here is a starting point:

var board = document.getElementById('board');

board.addEventListener('click', function (ev) {
  if (ev.target.parentNode.id == 'board') {
    var cls = ev.target.getAttribute('class');
    ev.target.setAttribute('class', swap(cls));
  }
});

function swap (cls) {
  return cls.replace(/\b(white|black)\b/, function ($0, $1) {
    return $1 == 'white' ? 'black' : 'white';
  });
}

#board { width: 150px; }
.white { background: white; }
.black { background: black; }

.piece { 
  float: left;
  width: 43px; 
  height: 43px; 
  border: 1px solid black; 
  margin: 0 5px 5px 0;
  border-radius: 50%;
}

<div id="board">
  <div class="piece white"></div
  ><div class="piece white"></div
  ><div class="piece white"></div
  ><div class="piece white"></div
  ><div class="piece black"></div
  ><div class="piece black"></div
  ><div class="piece black"></div
  ><div class="piece white"></div
  ><div class="piece white"></div>
</div>

Answer 2

Here's something to get you started, combine this with Pabs123's answer and you should be able to figure it out. Using the querySelectorAll() method and addEventListener(), you can add click events to the div elements allowing for a a small amount of code to handle a everything.

window.onload = function() {
    var divs = document.querySelectorAll('.othello-piece');
    for(var i = 0, len = divs.length; i < len; i++) {
        var div = divs[i];
        div.addEventListener('click', function(e){
            e = e || event;
            var elem = e.target;
            var id = elem.id;
            var classes = elem.classList;
            console.log(classes);
        }, false);
    }
};

Of course, you probably want to put some checks in there (like if the divs variable has length, etc) and you can remove the log, that's just showing you it works. Also, here's a fiddle of it in action.

Answer 3

You can set the element's className property:

document.getElementById('idOfTheDiv').className = "desiredClassName";

alternatively you can use the element's classList to add or remove classes:

document.getElementById('idOfTheDiv').classList.remove('doNotWantThisClass');
document.getElementById('idOfTheDiv').classList.add('desiredClassName');