javascript - 仅当用户 "wins"时显示内容

Question

有点麻烦。我正在尝试创建一个重玩按钮，只有在用户获胜时才会出现，我已经将 div 的条件设置为 visibility:none 当用户获胜时，否则显示:无但是，该按钮总是从一开始就出现，有什么建议吗？只有当用户获胜时，音频才能正确播放。所以我在 html 中得到了这段代码:

<div id="Again">
  <button type="button" onclick="toggle_visibility">Play Again</button>
  </div>

和js中的以下内容:

function toggle_visibility(id) {
            var x = document.getElementById('Again');
            if (TOTAL_COUPLES_COUNT === flippedCouplesCount) {
            audioWin.play();
            x.style.display = 'block';}
            else {
                x.style.display = 'none';

            }

Answer 1

按钮的初始显示状态应该是none。这是一个可以帮助您的框架片段:

const button = document.querySelector("button");
const input = document.querySelector("input");
const inputHandler = evt => {
  if (+evt.target.value == guessValue) {
    button.classList.replace("hidden", "visible");
  } else {
    button.classList.replace("visible", "hidden");
  }
};
let guessValue = Math.ceil(Math.random() * 10);

button.addEventListener("click", () => {
  button.classList.replace("visible", "hidden");
  input.value = "";
  guessValue = Math.ceil(Math.random() * 10);
});

input.addEventListener("change", inputHandler);
input.addEventListener("keyup", inputHandler);

button.hidden {
  display: none
}

button.visible {
  display: inline-block
}

<input type="number" max="10" min="1"> Guess a number (1 - 10)
<button class="hidden">Again?</button>