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

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');

Answer 2

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 3

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 aa 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.