Javascript 如何在单击元素时添加和删除类

不使用JQUERY，我需要能够更改表中div上的css类。下面的链接将显示该表的外观

我需要能够点击一个空格，它会删除类的最后一个元素，并添加一个新的元素。我需要能够获取div的id并更改该div的类（或类似的东西）

这是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>

您可以设置元素的属性：

document.getElementById（'idOfTheDiv'）.className=“desiredClassName”

或者，您可以使用元素的添加或删除类：

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

可以设置元素的属性：

document.getElementById（'idOfTheDiv'）.className=“desiredClassName”

或者，您可以使用元素的添加或删除类：

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

下面是一些让您开始学习的内容，将其与Pabs123的答案结合起来，您应该能够找到答案。使用方法和，您可以向
div
元素添加click事件，从而允许少量代码来处理所有内容

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

window.onload=function（）{
var divs=document.queryselectoral（'.othello-piece'）；
对于（变量i=0，len=divs.length；i

当然，您可能希望在其中放入一些检查（例如，如果
divs
变量具有
length
等），然后您可以删除日志，这只是向您展示了它的工作原理。还有，它正在发挥作用。
这里有一些东西可以让你开始，结合Pabs123的答案，你应该能够找到答案。使用方法和，您可以向
div
元素添加click事件，从而允许少量代码来处理所有内容

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

window.onload=function（）{
var divs=document.queryselectoral（'.othello-piece'）；
对于（变量i=0，len=divs.length；i

当然，您可能希望在其中放入一些检查（例如，如果
divs
变量具有
length
等），然后您可以删除日志，这只是向您展示了它的工作原理。还有，它的作用。
我将使用
replace（）
和事件委派。这是一个起点：


var board=document.getElementById（'board'）；
board.addEventListener（'click'，函数（ev）{
如果（ev.target.parentNode.id=='board'）{
var cls=ev.target.getAttribute（'class'）；
ev.target.setAttribute（'class'，swap（cls））；
}
});
功能交换（cls）{
返回cls.replace（/\b（白|黑）\b/，函数（$0，$1）{
return$1=='white'？'black'：'white'；
});
}
#板{wi