向我的 JS 添加一个工作清除按钮答案

【问题标题】：Add a working clear button to my JS向我的 JS 添加一个工作清除按钮
【发布时间】：2014-01-15 03:24:34
【问题描述】：

如何向标有新游戏的按钮添加一个有效的“清除按钮”。我想把它放在我的 JS 中。当我点击新游戏按钮时，我希望能够清除整个游戏板。感谢您的帮助！

HTML

<html>
<head>
  <title>Tic Tac Toe</title>
  <link rel="stylesheet" type="text/css" href="style.css">  
  <script type="text/javascript" src="script.js"></script>
  <link href='http://fonts.googleapis.com/css?family=Emilys+Candy' rel='stylesheet' type='text/css'>
</head>
<body onload ='init()'>
  <div class="scoreboard">
    <!-- <div id="title"></div> -->
    <div id="s1">Player 1</div>
    <div id="s2">Player 2</div>
  </div>
  <div class="wrapper">
    <div class="gameboard">
      <div class="row1">
        <div class="cell" id="cell1">&nbsp;</div>
        <div class="cell" id="cell2">&nbsp;</div>
        <div class="cell" id="cell3">&nbsp;</div>
      </div>
      <div class="row1">
        <div class="cell" id="cell4">&nbsp;</div>
        <div class="cell" id="cell5">&nbsp;</div>
        <div class="cell" id="cell6">&nbsp;</div>
      </div>
      <div class="row1">
        <div class="cell" id="cell7">&nbsp;</div>
        <div class="cell" id="cell8">&nbsp;</div>
        <div class="cell" id="cell9">&nbsp;</div>
      </div>
    </div>
    <div class="button">
      <button>New Game</button>
      <button>End Game</button>
    </div>
  </div>
</body>
</html>

JAVA 脚本

var playerTurn = (0);
var moved = [[]]
function init() {   
  var cells = document.getElementsByClassName("cell");
  for (var i in cells) {
    cells[i].onclick = takeTurn;
  }
}

function takeTurn() {
  if (this.innerHTML == "&nbsp;" ) {
    if (playerTurn%2 == 0) {
      this.innerHTML = "<img src='http://www.clker.com/cliparts/8/7/c/4/1224784889408279301bluefrog23_Peppermint_Candy.svg.thumb.png' />";
    } else {
      this.innerHTML = "<img src='http://static1.wikia.nocookie.net/__cb62488/clubpenguin/images/thumb/6/64/Gingerbread_Cookie_Costume_clothing_icon_ID_4473.png/100px-0,615,0,615-Gingerbread_Cookie_Costume_clothing_icon_ID_4473.png' />";
    }
    playerTurn++;
  }
}

CSS

body {
  background-image: url("http://precisioncrossfit.net/wp-content/uploads/2013/12/candyland.jpg");
  background-size: 1280 709;
/*  border-image: url(http://s23.postimg.org/du3h5c82z/Screen_Shot_2014_01_14_at_12_37_36_PM.png) 27 27 27 27 round round;
  border-width: 20px;*/
}   
.gameboard {
    width: 340px
    height: 340px;
    float: left;
    z-index: 1;
    margin-top: 230px;
    margin-left: 400px;
}
.wrapper {
    width: 340px;
    margin: 0 auto;
    height: 340px;
}
.cell {
    width: 100px;
    height: 100px
    float: left;
    font-size: 12px
}
.row1 {
    clear: both
    width: 330px;
    height: 102px;

}
#cell1,#cell2,#cell4,#cell5 {
    border-bottom: 8px solid black;
    border-right: 8px solid black;
    float: left;
    width: 100px;
    height: 100px;
    font-size: 100px;
    text-align: center;
    border-radius: 15px;
}
#cell3,#cell6 {
    border-bottom: 8px solid black;
    margin: 0 auto;
    font-size: 10px solid black;
    float: left;
    width: 100px;
    height: 100px;
    font-size: 100px;
    text-align: center;
    border-radius: 15px;
}
#cell7 {
    border-right: 8px solid black;
    float: left;
    width: 100px;
    height: 100px;
    font-size: 100px;
    text-align: center;
    border-radius: 15px;
}
#cell8 {
    /**/
    float: left;
    width: 100px;
    height: 100px;
    border-right: 8px solid;
    font-size: 100px;
    text-align: center;
    border-radius: 15px;
}
#cell9 {
    margin: 0 auto;
    /*float: left;*/
    width: 100px;
    height: 100px;
    margin-left: 220px;
    margin-right: 0px;
    font-size: 100px;
    text-align: center;
    border-radius: 15px;
}
.scoreboard {
    height: 50px;
    width: 400px;
    z-index: 1;
    float: left;
    position: absolute;
    border-bottom: 10px solid red;
    margin-top: 350px;
    margin-left: 200px;
}
#s1 {
    border-right: 10px solid white;
    height: 250px;
    width: 150px;
    position: absolute;
    margin-top: auto;
    font-size: 40px;
    font-family: 'Emilys Candy';
    margin-left: 40px;
}

#s2 {
    height: 250px;
    width: 150px;
    position: absolute;
    margin-left: 230;
    margin-top: auto;
    font-size: 40px;
    font-family: 'Emilys Candy';
}
.button {
     background-color:white;
     width: 160px;
     margin:0 auto;
     margin-left: 200px;
}

button {
    float: left;

【问题讨论】：

如果你想鼓励人们帮助你：你真的需要从你的代码中删除多余的空格，最好让你的缩进更小。
要求人们为你编写代码的问题（例如这个）通常也是如此。
考虑到已经完成的工作和发布代码的努力，我会说这个问题是可以接受的。
谢谢！我不是在要求人们编写我的代码，而是在寻求帮助。

标签： javascript button

【解决方案1】：

最简单的方法是像这样重置单元格内容：

function clear_board() {

    var cells = document.getElementsByClassName("cell");
    for (var i in cells) {
        cells[i].innerHTML = "&nbsp";
    }
}

与 init 函数非常相似，只是你只是重置内容而不是设置事件处理程序。

【讨论】：

与将单元格链接到单击事件处理程序的方式相同：cells[i].onclick = takeTurn; 在这里，您将需要按钮元素而不是单元格和 clear_board 而不是 take_turn。