时间戳

首页 > 解决方案 > 删除由函数创建的所有内容

javascript - 删除由函数创建的所有内容

问题描述

如何删除由函数创建的所有内容（在我的情况下是单击按钮）。createBoard()我的目标是在我单击代码上的按钮时删除由函数创建的所有内容reset。一旦我点击了我想createBoard()重新启动的按钮，我虽然可以通过删除它创建的内容然后再次调用它来做到这一点，所有这些都只需点击一个按钮。

代码：

// jshint esversion:6

document.addEventListener("DOMContentLoaded", () => {


  const grid = document.querySelector(".grid");
  let squares = [];

  let coins = 0;

  function createBoard() {
    for (let i = 0; i < 100; i++) {
      const square = document.createElement('div');
      square.setAttribute("id", i);
      square.setAttribute("class", "miniSquare");
      grid.appendChild(square);
      squares.push(square);
    }
    const miniSquares = document.querySelectorAll(".miniSquare");


    function onClick() {
      const minedArray = ["bitCoin", "rock", "rock", "rock", "rock"];
      const minedRandomizer = minedArray[Math.floor(minedArray.length * Math.random())];
      this.setAttribute("class", minedRandomizer);
      this.classList.remove("miniSquare");
      if (this.classList.contains("bitCoin")) {
        coins++
        document.querySelector("p").innerHTML = coins;
      }
      this.removeEventListener("click", onClick)
    }

    for (let i = 0; i < miniSquares.length; i++) {
      miniSquares[i].addEventListener("click", onClick);

    }
  }

  createBoard();

function refresh(){
  // delete.createBoard;
  //createBoard();
}

document.querySelector("button").addEventListener("click", refresh);


});
.grid{
  height: 500px;
  width: 500px;
  display: flex;
  flex-wrap: wrap;
  background-color: green;
  background-size: cover;
}

.miniSquare {
  height: 40px;
  width: 40px;
  margin: 3px;
  background-color: brown;
  background-size: cover;
}

.rock{
    height: 40px;
    width: 40px;
    margin: 3px;
    background-color: grey;
    background-size: cover;
}

.bitCoin{
    height: 40px;
    width: 40px;
    margin: 3px;
    background-color: yellow;
    background-size: cover;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Bitcoin Mining</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
<div class="grid">

</div>

<h1>Score</h1>
<p>You have none</p>
<button type="button" name="button">Refresh</button>

<script src="app.js" charset="utf-8"></script>
  </body>
</html>

标签： javascript

解决方案

您可以通过使您的refresh();功能如下来做到这一点；

function refresh() {
  document.querySelector(".grid").innerHTML = "";
  createBoard();
}

见下面的片段；

// jshint esversion:6

document.addEventListener("DOMContentLoaded", () => {


  const grid = document.querySelector(".grid");
  let squares = [];

  let coins = 0;

  function createBoard() {
    for (let i = 0; i < 100; i++) {
      const square = document.createElement('div');
      square.setAttribute("id", i);
      square.setAttribute("class", "miniSquare");
      grid.appendChild(square);
      squares.push(square);
    }
    const miniSquares = document.querySelectorAll(".miniSquare");


    function onClick() {
      const minedArray = ["bitCoin", "rock", "rock", "rock", "rock"];
      const minedRandomizer = minedArray[Math.floor(minedArray.length * Math.random())];
      this.setAttribute("class", minedRandomizer);
      this.classList.remove("miniSquare");
      if (this.classList.contains("bitCoin")) {
        coins++
        document.querySelector("p").innerHTML = coins;
      }
      this.removeEventListener("click", onClick)
    }

    for (let i = 0; i < miniSquares.length; i++) {
      miniSquares[i].addEventListener("click", onClick);

    }
  }

  createBoard();

function refresh(){
  document.querySelector(".grid").innerHTML = "";
  createBoard();
}

document.querySelector("button").addEventListener("click", refresh);


});
.grid{
  height: 500px;
  width: 500px;
  display: flex;
  flex-wrap: wrap;
  background-color: green;
  background-size: cover;
}

.miniSquare {
  height: 40px;
  width: 40px;
  margin: 3px;
  background-color: brown;
  background-size: cover;
}

.rock{
    height: 40px;
    width: 40px;
    margin: 3px;
    background-color: grey;
    background-size: cover;
}

.bitCoin{
    height: 40px;
    width: 40px;
    margin: 3px;
    background-color: yellow;
    background-size: cover;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Bitcoin Mining</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
<div class="grid">

</div>

<h1>Score</h1>
<p>You have none</p>
<button type="button" name="button">Refresh</button>

<script src="app.js" charset="utf-8"></script>
  </body>
</html>

基本上我正在使用该.innerHTML功能来清除.grid节点的内容。

推荐阅读