我的 div 显示，但仅在我第二次按下按钮后

Question

我正在用 HTML、CSS 和 JavaScript 制作剪刀石头布游戏。 我的程序的工作方式是，我将按下一个读取石头、纸张或剪刀的按钮。 按下按钮后，function 将运行，这将从计算机生成随机选择。 然后用户输入将与计算机输入进行比较。 所以，假设用户选择了“rock”，而计算机选择了“scissors”，那么会显示一条消息“rock beats scissors”。 问题是我只能在第二次按下按钮时才运行此消息。

这是我的代码：

    // Make the variables
const userScore = 0;
const compScore = 0;


function showInstruct() {
            var show = document.getElementById('hideInstruct');
            if (show.style.display === "none") {
                show.style.display = "block";
            }
            else {
                show.style.display = "none"
            }
        }

        function hideButtons() {
            document.getElementById('buttonDiv').style.display = 'none';
            document.getElementById('countdown').style.display = 'flex';
            document.getElementById('nextRound').style.display = 'none';

            revealRps();

            setCountdown();
        }

        function setCountdown() {
            var numberS = 3;
            var x = setInterval(function() {
            document.getElementById("number").innerHTML = numberS;
            numberS--;
            if (numberS < 0) {
                clearInterval(x);
                document.getElementById("number").innerHTML = "VS";
                document.getElementById('rps').style.display = 'none';
                document.getElementById('nextRound').style.display = 'flex';
                document.getElementById('input').style.display = 'none';
                compare();
            }
            }, 950);
        }

        function revealRps() {
            document.getElementById('rps').style.display = 'flex';
            document.getElementById('nextRound').style.display = 'none';
        }

        function hideRps() {
            document.getElementById('rps').style.display = 'none';
            document.getElementById('input').style.display = 'flex';
        }

        function compare() {
            var random = ['rock', 'paper', 'scissors'];
            var comp = Math.floor(Math.random() * random.length);
            let compDraw = random[comp];

            rockBtn.addEventListener('click', function() {
                console.log("Butts")
                if (compDraw == 'scissors') 
                {
                    document.getElementById('rockBeats').style.display = 'flex';
                    clearMessage();
                }
                else if (compDraw == 'paper')
                {
                    document.getElementById('paperBeats').style.display = 'flex';
                    clearMessage();
                }
                else if (compDraw == 'rock')
                {
                    document.getElementById('draw').style.display = 'flex';
                    clearMessage();
                }
            });
        }

还有我的 HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Extreme Rock Paper Scissors!</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0l">
    <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Open+Sans&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=New+Rocker&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=New+Rocker&family=Schoolbell&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Long+Cang&family=New+Rocker&family=Schoolbell&display=swap" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="RPS.css">
    <script type="text/javascript" src="RPS.js"></script>

    <div class="titleWords">
        <h1>EXTREME ROCK PAPER SCISSORS!</h1>
    </div>

</head>
<body>

    <div id="beats">
        <div id="rockBeats">ROCK BEATS SCISSORS</div>
        <div id="paperBeats">PAPER BEATS ROCK</div>
        <div id="scissorsBeats">SCISSORS BEATS PAPER</div>
        <div id="draw">DRAW</div>
        <div id="noInput">YOU DIDN'T CLICK ANYTHING. COMPUTER AUTOMATICALLY WINS</div>
    </div>
    <div id="buttonDiv">
        <button id="playButton" = onclick="hideButtons()">PLAY GAME</button>
        <button id="instructions" onclick="showInstruct()">INSTRUCTIONS<button>

    </div>


    <div id="hideInstruct">
        <p>The premise - This is war! And you must choose your attacks carefully.
        When you press PLAY GAME a countdown clock will countdown from 3. During that time you need to make a selection of how you're going to attack. Are you going to use Rock, Paper, or Scissors? 
        </p>
        <br>
        <p>The logistics - If you choose Rock and the computer chooses scissors, you crush those scissors into dust!  If you choose scissors and the computer chooses paper, you slice the paper into shreds! And if you choose paper and the computer chooses rock, you smear the rock with the a major paper-cut! However, if you choose Rock and the computer chooses Paper than you lose. In essense, the computer can do the same things to you that you can do to it. If you and the computer both draw the same thing, than it's considered a draw and nothing happens. And one more thing. If time runs out and you've selected nothing, than the computer automatically wins the point.</p>
        <br>
        <p>How to win - For each victory, that's one point. The first player to reach 3 points wins the game!</p>
    </div>

    <article id="countdown">
        <p id="number">3</p>
    </article>

    <footer id="rps">
        <button type="button" id="rockBtn" onclick="hideRps()">ROCK</button>
        <button type="button" id="paperBtn" onclick="hideRps()">PAPER</button>
        <button type="button" id="scissorsBtn" onclick="hideRps()">SCISSORS</button>
    </footer>

    <div id="input">
        <p id="locked">Your answer is locked in</p>
    </div>

    <div id="nextRound">
        <button id="nextButton" onclick="hideButtons()">Next Round</button>
    </div>

</body>
</html>

Answer 1

在您的比较function 中，我认为您有一个问题导致您的应用程序现在发生了什么，请尝试检查此行：

rockBtn.addEventListener('click', function() {

rockBtn 没有定义！！

我的 div 显示，但仅在我第二次按下按钮后

问题描述

1 个解决方案

解决方案1
0 2020-04-25 18:53:12

我的 div 显示，但仅在我第二次按下按钮后

问题描述

1 个解决方案

解决方案1 0 2020-04-25 18:53:12

解决方案1
0 2020-04-25 18:53:12