javascript - 按钮消失-6ren

javascript - 按钮消失

转载作者：行者123 更新时间：2023-12-02 01:58:58

我正在使用 HTML Canvas 制作一个游戏，用户必须找到并单击松鼠。该按钮(位于 Canvas 之外)用于重置分数并重新开始游戏。但是，当用户第一次在 Canvas 内单击后，此按钮就会消失。

为什么在 Canvas 内第一次单击后重新启动按钮消失？以及如何解决它？

// jshint esversion: 6

window.onload = function () {
    var canvas = document.getElementById("canvas");
    /** @type {CanvasRenderingContext2D} */
    var ctx = canvas.getContext("2d");

    // images
    var squirrel_img = document.getElementById("squirrel-img");
    var trees_img = document.getElementById("tree-img");

    var scoreboard_div = document.getElementById("scoreboard"); // scoreboard
    var score = 0; // score

    // styles
    canvas.width = window.innerWidth * 0.75;
    canvas.height = window.innerHeight;
    canvas.style.border = "15px ridge red";
    canvas.style.borderRadius = "5px";

    ctx.drawImage(trees_img, 0, 0, canvas.width, canvas.height); // background image

    function clearCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height); // clear everything
        ctx.drawImage(trees_img, 0, 0, canvas.width, canvas.height); // draw background image again
    }

    var currentSquirrel = 0; // to keep track of which squirrel is to be shown

    // all squirrels [x, y, width, height, alpha]
    var squirrel1 = [10, 10, 50, 50, 1];
    var squirrel2 = [canvas.width * 0.85, canvas.height * 0.75, 50, 50, 0.7];
    var squirrel3 = [canvas.width * 0.5, canvas.height * 0.70, 50, 50, 0.6];
    var squirrel4 = [canvas.width * 0.5, canvas.height * 0.15, 50, 50, 0.5];
    var squirrel5 = [canvas.width * 0.82, canvas.height * 0.40, 50, 50, 0.4];

    // an array with all of the squirrels in it
    var allSquirrels = [squirrel1, squirrel2, squirrel3, squirrel4, squirrel5];
    var squirrel = allSquirrels[currentSquirrel]; // using the currentSquirrel variable as an index to see the properties of the current squirrel
    ctx.drawImage(squirrel_img, squirrel[0], squirrel[1], squirrel[2], squirrel[3]); // index 0 is x pos, 1 is y pos, 2 is width and 3 is height

    // what happens on mouse click
    function mouseClick(squirrels) { // allSquirrels array will be passed as the 'squirrels' argument in this function
        console.log("Mouse has clicked!");

        // co-ordinates of the mouse click
        var click_x = event.pageX;
        var click_y = event.pageY;
        console.log(click_x, click_y);
        // co-ordinates of the canvas
        var canvascoor = canvas.getBoundingClientRect();
        // adding scrollX and scrollY to get the real position of the canvas, accounting for how much has been scrolled
        var canvasX = canvascoor.x + scrollX;
        var canvasY = canvascoor.y + scrollY;
        var canvasWidth = canvascoor.width;
        var canvasHeight = canvascoor.height;
        console.log(canvasX, canvasY);

        // co-ordinates of the squirrel - adding canvas coordinates to it to get the position of the squirrel relative to the screen and not just to the canvas
        var squirrel_x = canvasX + squirrel[0];
        var squirrel_y = canvasY + squirrel[1];
        var squirrel_width = squirrel[2];
        var squirrel_height = squirrel[3];
        // check if the click was within the squirrel's boundary
        if ((click_x >= squirrel_x && click_x <= squirrel_x + squirrel_width) && (click_y >= squirrel_y && click_y <= (squirrel_y + squirrel_height))) {
            score++;
            scoreboard_div.innerText = `Score: ${score}/5`;
            clearCanvas();

            // add green background and then remove it after 300 miliseconds
            document.getElementsByTagName("body")[0].classList.add("green");
            setTimeout(function () {
                document.getElementsByTagName("body")[0].classList.remove("green");
            }, 300);

            // the allSquirrels array's last index is 4 (as there are 5 items in it) so if the currentSquirrel is equal to or less than 3 (3 is the second-last squirrel), then continue the game as usual
            if (currentSquirrel <= 3) {
                currentSquirrel++; // next squirrel
                squirrel = allSquirrels[currentSquirrel];
                ctx.globalAlpha = squirrel[4];
                ctx.drawImage(squirrel_img, squirrel[0], squirrel[1], squirrel[2], squirrel[3]);
                ctx.globalAlpha = 1;
            } 
            // if the currentSquirrel is the last one (4th index) or more, then stop the game
            else if (currentSquirrel >= 4) {
                currentSquirrel = 5;
                alert(`You have completed the game! You got ${score}/5.`);
                document.getElementsByTagName("body")[0].removeEventListener("click", mouseClickRun);
            }
        } 
        // if the click wasn't on the squirrel but on the canvas
        else if (event.target.id === "canvas") {
            scoreboard_div.innerText = `Score: ${score}/5`;
            clearCanvas();
            // add red background and then remove it after 300 miliseconds
            document.getElementsByTagName("body")[0].classList.add("red");
            setTimeout(function () {
                document.getElementsByTagName("body")[0].classList.remove("red");
            }, 300);

            // the allSquirrels array's last index is 4 (as there are 5 items in it) so if the currentSquirrel is equal to or less than 3 (3 is the second-last squirrel), then continue the game as usual
            if (currentSquirrel <= 3) {
                currentSquirrel++;
                squirrel = allSquirrels[currentSquirrel];
                ctx.globalAlpha = squirrel[4];
                ctx.drawImage(squirrel_img, squirrel[0], squirrel[1], squirrel[2], squirrel[3]);
                ctx.globalAlpha = 1;
            } 
            // if the currentSquirrel is the last one (4th index) or more, then stop the game
            else if (currentSquirrel >= 4) {
                currentSquirrel = 5;
                console.log(currentSquirrel);
                alert(`You have completed the game! You got ${score}/5.`);
                document.getElementsByTagName("body")[0].removeEventListener("click", mouseClickRun);
            }
        }
    }

    // restart button
    var restart_btn = document.getElementById("restart-btn");
    restart_btn.addEventListener("click", () => {
        // if the squirrel is more than the last index number in the allSquirrels array, then restart the game 
        if (currentSquirrel >= 5) {
            currentSquirrel = 0;
            console.log(currentSquirrel);
            score = 0;
            scoreboard_div.innerText = `Score: ${score}/5`;
            var allSquirrels = [squirrel1, squirrel2, squirrel3, squirrel4, squirrel5];
            var squirrel = allSquirrels[currentSquirrel];
            ctx.drawImage(squirrel_img, squirrel[0], squirrel[1], squirrel[2], squirrel[3]);
            document.getElementsByTagName("body")[0].addEventListener("click", mouseClickRun);
        } else {
            alert("The game is already running." + currentSquirrel);
        }
    });

    function mouseClickRun() {
        mouseClick(allSquirrels);
    }

    /* When the body is clicked, run the mouseClickRun function to:
    check if the click was on the squirrel, if not then on the canvas
    */
    document.getElementsByTagName("body")[0].addEventListener("click", mouseClickRun);
};

/* Import Vag Rounded and Merriweather font */
@import url("https://aaditya-baduni.github.io/vag-rounded-font.css");
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400&display=swap");

* {
    color: black;
}

body {
    background-color: rgb(31, 42, 53);
}

header {
    padding: 0.5%;
    border-bottom: 2px solid white;
    margin-bottom: 3%;
}

header > a {
    position: absolute;
}

#logo {
    border-radius: 2.5px;
}

#website-name{
    font-family: VagRounded, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgb(229, 255, 0);
}
#website-name:hover {
    color: rgb(200, 200, 0);
}

#title {
    text-align: center;
    font-family: 'Merriweather', serif;
    margin-top: 0.5%;
    font-size: 2.5rem;
}

#title-description {
    text-align: center;
    margin-top: 1%;
}

/* Score board */
#scoreboard {
    width: 25%;
    background-color: white;
    color: black;

    text-align: center;
    font-family: 'Merriweather', serif;
    font-size: 2rem;
    border-radius: 5px;
    position: sticky;
    position: -webkit-sticky;
    top: 0;

    margin-bottom: 3%;
    margin-right: auto;
    margin-left: auto;
}

canvas:hover {
    cursor: pointer;
}

/* Background color changes according to user score */
.green {
    background-color: green;
}
.red {
    background-color: red;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-thumb {
    background-color: rgb(150, 150, 150);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: rgb(100, 100, 100);
}

/* Images shouldnt be displayed */
#squirrel-img, #tree-img {
    display: none;
}

/* Different screen sizes optimization */
@media (max-width: 960px) {
    header > a {
        position: static;
    }
}
@media (max-width: 780px) {
    #title-description {
        line-height: 150%;
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Find the Squirrel! | Aaditya's Website</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89ebe6e6fdfafdfbe8f9c9bca7b8a7b9" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <link rel="icon" href="https://aaditya-baduni.github.io/logo.png">
</head>

<body>
    <header>
        <a href="https://aaditya-baduni.github.io/games/" class="navbar-brand">
            <img src="https://aaditya-baduni.github.io/logo.png" alt="logo" id="logo">
            <span id="website-name">Aaditya's Games</span>
        </a>

        <h1 id="title">Find the Squirrel!</h1>
        <p id="title-description">
            There is a squirrel hiding in between those branches! Click on it and you will score points! <br>
            As soon as you click somewhere, a new squirrel will appear! There will be only 5 squirrels.
        </p>
    </header>

    <!-- Scoreboard -->
    <div id="scoreboard">
        Score: 0/5
        <input type="button" class="btn btn-success" id="restart-btn" value="Restart">
    </div>

    <!-- Center align the canvas -->
    <p style="text-align: center;">
        <canvas id="canvas"></canvas>
    </p>
    <!-- Squirrel and tree images - hidden (using CSS) and displayed only on the canvas -->
    <img src="https://aaditya-baduni.github.io/games/find-the-squirrel-2-canvas/squirrel.png" alt="Squirrel" id="squirrel-img">
    <img src="https://aaditya-baduni.github.io/games/find-the-squirrel-2-canvas/trees.jpg" alt="Trees-background" id="tree-img">

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="096b66667d7a7d7b6879493c27382739" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
        crossorigin="anonymous"></script>
</body>

</html>

最佳答案

这是因为您正在用新分数完全替换记分板 div 内部文本，这会在第一次更新后删除按钮

<div id="scoreboard">
    Score: 0/5
    <input type="button" class="btn btn-success" id="restart-btn" value="Restart">
</div>

...

var scoreboard_div = document.getElementById("scoreboard"); // scoreboard div

问题就在这里以及此代码的所有出现，如下:

scoreboard_div.innerText = `Score: ${score}/5`;

解决方案

稍微改变一下会有帮助。 (还添加了工作代码，您可以运行并检查，同时请检查CSS)

记分板 HTML:为分数添加 span，例如

<div id="scoreboard">
  <span id='scoreCounter'>Score: 0/5 </span>
  <input type="button" class="btn btn-success" id="restart-btn" value="Restart">
</div>

2.然后不要定位整个div，而是定位这个span:(我没有更改变量名称，如果您愿意，请这样做)

var scoreboard_div = document.getElementById("scoreCounter"); // scoreboard

下面的工作代码

// jshint esversion: 6

window.onload = function() {
  var canvas = document.getElementById("canvas");
  /** @type {CanvasRenderingContext2D} */
  var ctx = canvas.getContext("2d");

  // images
  var squirrel_img = document.getElementById("squirrel-img");
  var trees_img = document.getElementById("tree-img");

  var scoreboard_div = document.getElementById("scoreCounter"); // scoreboard
  var score = 0; // score

  // styles
  canvas.width = window.innerWidth * 0.75;
  canvas.height = window.innerHeight;
  canvas.style.border = "15px ridge red";
  canvas.style.borderRadius = "5px";

  ctx.drawImage(trees_img, 0, 0, canvas.width, canvas.height); // background image

  function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // clear everything
    ctx.drawImage(trees_img, 0, 0, canvas.width, canvas.height); // draw background image again
  }

  var currentSquirrel = 0; // to keep track of which squirrel is to be shown

  // all squirrels [x, y, width, height, alpha]
  var squirrel1 = [10, 10, 50, 50, 1];
  var squirrel2 = [canvas.width * 0.85, canvas.height * 0.75, 50, 50, 0.7];
  var squirrel3 = [canvas.width * 0.5, canvas.height * 0.70, 50, 50, 0.6];
  var squirrel4 = [canvas.width * 0.5, canvas.height * 0.15, 50, 50, 0.5];
  var squirrel5 = [canvas.width * 0.82, canvas.height * 0.40, 50, 50, 0.4];

  // an array with all of the squirrels in it
  var allSquirrels = [squirrel1, squirrel2, squirrel3, squirrel4, squirrel5];
  var squirrel = allSquirrels[currentSquirrel]; // using the currentSquirrel variable as an index to see the properties of the current squirrel
  ctx.drawImage(squirrel_img, squirrel[0], squirrel[1], squirrel[2], squirrel[3]); // index 0 is x pos, 1 is y pos, 2 is width and 3 is height

  // what happens on mouse click
  function mouseClick(squirrels) { // allSquirrels array will be passed as the 'squirrels' argument in this function
    console.log("Mouse has clicked!");

    // co-ordinates of the mouse click
    var click_x = event.pageX;
    var click_y = event.pageY;
    console.log(click_x, click_y);
    // co-ordinates of the canvas
    var canvascoor = canvas.getBoundingClientRect();
    // adding scrollX and scrollY to get the real position of the canvas, accounting for how much has been scrolled
    var canvasX = canvascoor.x + scrollX;
    var canvasY = canvascoor.y + scrollY;
    var canvasWidth = canvascoor.width;
    var canvasHeight = canvascoor.height;
    console.log(canvasX, canvasY);

    // co-ordinates of the squirrel - adding canvas coordinates to it to get the position of the squirrel relative to the screen and not just to the canvas
    var squirrel_x = canvasX + squirrel[0];
    var squirrel_y = canvasY + squirrel[1];
    var squirrel_width = squirrel[2];
    var squirrel_height = squirrel[3];
    // check if the click was within the squirrel's boundary
    if ((click_x >= squirrel_x && click_x <= squirrel_x + squirrel_width) && (click_y >= squirrel_y && click_y <= (squirrel_y + squirrel_height))) {
      score++;
      scoreboard_div.innerText = `Score: ${score}/5`;
      clearCanvas();

      // add green background and then remove it after 300 miliseconds
      document.getElementsByTagName("body")[0].classList.add("green");
      setTimeout(function() {
        document.getElementsByTagName("body")[0].classList.remove("green");
      }, 300);

      // the allSquirrels array's last index is 4 (as there are 5 items in it) so if the currentSquirrel is equal to or less than 3 (3 is the second-last squirrel), then continue the game as usual
      if (currentSquirrel <= 3) {
        currentSquirrel++; // next squirrel
        squirrel = allSquirrels[currentSquirrel];
        ctx.globalAlpha = squirrel[4];
        ctx.drawImage(squirrel_img, squirrel[0], squirrel[1], squirrel[2], squirrel[3]);
        ctx.globalAlpha = 1;
      }
      // if the currentSquirrel is the last one (4th index) or more, then stop the game
      else if (currentSquirrel >= 4) {
        currentSquirrel = 5;
        alert(`You have completed the game! You got ${score}/5.`);
        document.getElementsByTagName("body")[0].removeEventListener("click", mouseClickRun);
      }
    }
    // if the click wasn't on the squirrel but on the canvas
    else if (event.target.id === "canvas") {
      scoreboard_div.innerText = `Score: ${score}/5`;
      clearCanvas();
      // add red background and then remove it after 300 miliseconds
      document.getElementsByTagName("body")[0].classList.add("red");
      setTimeout(function() {
        document.getElementsByTagName("body")[0].classList.remove("red");
      }, 300);

      // the allSquirrels array's last index is 4 (as there are 5 items in it) so if the currentSquirrel is equal to or less than 3 (3 is the second-last squirrel), then continue the game as usual
      if (currentSquirrel <= 3) {
        currentSquirrel++;
        squirrel = allSquirrels[currentSquirrel];
        ctx.globalAlpha = squirrel[4];
        ctx.drawImage(squirrel_img, squirrel[0], squirrel[1], squirrel[2], squirrel[3]);
        ctx.globalAlpha = 1;
      }
      // if the currentSquirrel is the last one (4th index) or more, then stop the game
      else if (currentSquirrel >= 4) {
        currentSquirrel = 5;
        console.log(currentSquirrel);
        alert(`You have completed the game! You got ${score}/5.`);
        document.getElementsByTagName("body")[0].removeEventListener("click", mouseClickRun);
      }
    }
  }

  // restart button
  var restart_btn = document.getElementById("restart-btn");
  restart_btn.addEventListener("click", () => {
    // if the squirrel is more than the last index number in the allSquirrels array, then restart the game 
    if (currentSquirrel >= 5) {
      currentSquirrel = 0;
      console.log(currentSquirrel);
      score = 0;
      scoreboard_div.innerText = `Score: ${score}/5`;
      var allSquirrels = [squirrel1, squirrel2, squirrel3, squirrel4, squirrel5];
      var squirrel = allSquirrels[currentSquirrel];
      ctx.drawImage(squirrel_img, squirrel[0], squirrel[1], squirrel[2], squirrel[3]);
      document.getElementsByTagName("body")[0].addEventListener("click", mouseClickRun);
    } else {
      alert("The game is already running." + currentSquirrel);
    }
  });

  function mouseClickRun() {
    mouseClick(allSquirrels);
  }

  /* When the body is clicked, run the mouseClickRun function to:
  check if the click was on the squirrel, if not then on the canvas
  */
  document.getElementsByTagName("body")[0].addEventListener("click", mouseClickRun);
};

/* Import Vag Rounded and Merriweather font */

@import url("https://aaditya-baduni.github.io/vag-rounded-font.css");
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400&display=swap");
* {
  color: white;
}

body {
  background-color: rgb(31, 42, 53);
}

header {
  padding: 0.5%;
  border-bottom: 2px solid white;
  margin-bottom: 3%;
}

header>a {
  position: absolute;
}

#logo {
  border-radius: 2.5px;
}

#website-name {
  font-family: VagRounded, sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgb(229, 255, 0);
}

#website-name:hover {
  color: rgb(200, 200, 0);
}

#title {
  text-align: center;
  font-family: 'Merriweather', serif;
  margin-top: 0.5%;
  font-size: 2.5rem;
}

#title-description {
  text-align: center;
  margin-top: 1%;
}


/* Score board */

#scoreboard,
#scoreCounter {
  width: 25%;
  background-color: white;
  color: black;
  text-align: center;
  font-family: 'Merriweather', serif;
  font-size: 2rem;
  border-radius: 5px;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  margin-bottom: 3%;
  margin-right: auto;
  margin-left: auto;
}

canvas:hover {
  cursor: pointer;
}


/* Background color changes according to user score */

.green {
  background-color: green;
}

.red {
  background-color: red;
}


/* Custom Scrollbar */

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(150, 150, 150);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(100, 100, 100);
}


/* Images shouldnt be displayed */

#squirrel-img,
#tree-img {
  display: none;
}


/* Different screen sizes optimization */

@media (max-width: 960px) {
  header>a {
    position: static;
  }
}

@media (max-width: 780px) {
  #title-description {
    line-height: 150%;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Find the Squirrel! | Aaditya's Website</title>
  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13717c7c67606761726353263d223d23" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
  <link rel="icon" href="https://aaditya-baduni.github.io/logo.png">
</head>

<body>
  <header>
    <a href="https://aaditya-baduni.github.io/games/" class="navbar-brand">
      <img src="https://aaditya-baduni.github.io/logo.png" alt="logo" id="logo">
      <span id="website-name">Aaditya's Games</span>
    </a>

    <h1 id="title">Find the Squirrel!</h1>
    <p id="title-description">
      There is a squirrel hiding in between those branches! Click on it and you will score points! <br> As soon as you click somewhere, a new squirrel will appear! There will be only 5 squirrels.
    </p>
  </header>

  <!-- Scoreboard -->
  <div id="scoreboard">
    <span id='scoreCounter'>Score: 0/5 </span>
    <input type="button" class="btn btn-success" id="restart-btn" value="Restart">
  </div>

  <!-- Center align the canvas -->
  <p style="text-align: center;">
    <canvas id="canvas"></canvas>
  </p>
  <!-- Squirrel and tree images - hidden (using CSS) and displayed only on the canvas -->
  <img src="https://aaditya-baduni.github.io/games/find-the-squirrel-2-canvas/squirrel.png" alt="Squirrel" id="squirrel-img">
  <img src="https://aaditya-baduni.github.io/games/find-the-squirrel-2-canvas/trees.jpg" alt="Trees-background" id="tree-img">

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9cbc6c6dddadddbc8d9e99c87988799" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>

</html>

关于javascript - 按钮消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69254733/

文章推荐： ruby-on-rails - omniauth 自定义请求阶段表单

javascript - 为什么我的新内容没有立即在页面上显示/消失，而是在手动刷新后显示/消失？
我使用 vanilla JS 通过 AJAX 向数据库发送请求。数据写入数据库没有问题。在刷新页面之前，我看不到被放入数据库中的内容。当我删除内容时也会发生同样的情况，我必须刷新才能看到内容消失了。
Elixir Phoenix LiveView Echart 消失(消失)
抱歉，这篇文章很长，我试图提供所有信息并解释我已经尝试过的内容。问题: 我将经典的 Phoenix View 放入实时 View 中。虽然一切看起来都很好，但 echart 一完成绘制就消失了。好像
javascript - 单击按钮时选择框出现/消失
搜索了一下，没有找到我要找的东西。我有两个按钮，单击一次即可拉出两个不同的选择框，第二次单击它们就会消失。但是，我希望选择框 1 在单击按钮 2 时消失，反之亦然:选择框 2 将在单击按钮 1 时消失
ios - UILayoutViewController中的滚动时自动布局约束“消失”
我正在尝试使用自动布局使用“浮动”标题构建滚动视图。更确切地说，我正在尝试建立包含几列的日历视图。这些列中的每个列都应具有自己的标题，该标题应浮动在顶部，而该列可以垂直滚动到其下方。如果一切正常，则
jquery - 让具有类别的对象在循环中随机出现/消失
我正在尝试模仿星星背景。星星是在加载时创建并随机散布在整个网站上的。到目前为止我已经调整了一些代码。 var star="•"; var numStars=100; for(var x=1;x•";
jQuery:单击时菜单出现/消失
我查遍了整个网络，但找不到解决方案。我对 jQuery 也很陌生。我的案例: 我有一个导航栏，其中的每个链接都会激活/触发一个megamenu(每个链接都有自己的megamenu)。我需要什么:
android - OnChildClickListener 消失
我有一个可扩展的 ListView ，当我点击一行时，它会触发 onChildClick 或 onGroupClick，具体取决于我点击的是子项还是组。如果我在 xml 布局文件中添加可点击的内容(
ios - NSMutableData 消失
在我的程序中，我有一个 NSMutableData 变量，用于收集来自 http://www.nhara.org/scored_races-2013.htm 的信息。 .大约第三次从网站获取信息后，当
android - Genymotion 消失
我一直在完美地使用 Genymotion，但是从最近几天开始我的 Genymotion 并打开它的 GPS 开始，我的 Genymotion 突然消失了。但是我的 eclipse 显示 Genymot
添加文档类型时 CSS 消失
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
css - 添加到购物车按钮在悬停时立即出现/消失
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and t
c++ - vector 消失
所以我的 Item::return_all() 有问题，因为我在 main.cpp 中调用它。早些时候我在 read_file() 和 for (auto data : example_item) 中
ios - UITableViewCells 消失
所有 UITableCells 在 UITableView 中滚动和触摸时消失。一切都以编程方式完成，我使用标准的 UITableViewCell 类。我在某处读到包含我的单元格数据的数组可能被清空
ios - UICollectionView 消失
我对 Swift 还很陌生。我的问题是我的 UICollectionView 正在消失。在 Xcode 中，它显示一切就绪，但当我在模拟器或设备上启动时，它消失了，只剩下导航栏和标签栏。有谁知道是什
javascript - 根据单选按钮的状态变化使子内容出现/消失
这是 this one的续题。较早的问题是在复选框上。但是后来我根据要求把check box改成了radio buttons。现在我需要显示子单选按钮并在母单选按钮处于事件状态时更改背景颜色。一旦它
javascript - Canvas 消失
我用 JS 写了一个简单的脚本。当我将它放入 html 文档(在 body 标签的底部)时，它工作正常。当我尝试将它放入外部文档并链接它时，脚本运行但 canvas 元素消失(刚刚检查:当我将脚本放在
jquery - 滚动页面时使元素出现/消失
我正在尝试创建一个带有固定元素的滚动页面，当用户向下滚动页面时，该元素“始终”可见。例如，带有道路背景的汽车图像。因此，当用户向下滚动页面时，汽车看起来就像在路上行驶。虽然汽车出现在道路的顶部，但它必
javascript - 使文本在单击按钮时出现/消失
这个问题在这里已经有了答案: How can I change CSS display none or block property using jQuery? (15 个答案) 关闭 4 年前。
android - 如何避免旧的小部件在主要代码返工期间失败/消失？
我在市场上有一个支持小部件的应用程序。我对应用程序进行了一些重大更改，重新设计了很多内部结构，替换/重命名 Activity 等。其他更改包括从不同的共享首选项键获取小部件配置数据，尽管我已经编写了转
java - fragment 消失
我有一个 fragment alertsfragment.java，它有一个 GridView 布局，当我打开它时，它工作正常，但是当我在其他选项卡之间滑动时，它就消失了。为了解释更多，我有一个 Ac

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 按钮消失

解决方案