Question

我想显示单击按钮时所玩游戏的结果，但我只希望它们在单击按钮后才显示，而不是在首次加载页面时显示。

<div class="container text-center border border-primary rounded">
        <h1 class="container "> What are the Odds!?!</h1>
        <div class="col-sm">The game of definite uncertainty!</div>
        <?php

        $random = rand(1,2);
        $random2 = rand(1,2);
        ?>

        <div class="text-center">
        <div class="text-primary">Player1:<?php echo $random; ?></div><div class="text-danger">Player2:<?php echo $random2; ?></div>
        </div>
        <br>
        <div>
        <?php

        if($random ==1 && $random2 ==1){
            echo "Player 1 WINS!!!";
        }elseif($random ==2 && $random2 ==2){
            echo "Player 1 WINS!!!";
        }else{
            echo "Player 2 WINS!!!";
        }
        ?>
        </div>
        <br>
        <button onclick="location.reload();">Start!</button>
</div>

Answer 1

首先使用

隐藏容器

  <div style="display:none;" id="toggles" ><?php echo $text_you_want_todisplay; ?></div>

在按钮onclick中，您应该调用一个新的名称。

<button onclick="start();">Start!</button>

并在脚本上创建一个函数

<script>

 location.reload();
 $('#toggles').show();     

</script>

Answer 2

将结果（php）放入div中，然后使用js隐藏div。并在该div上附加一个事件，以在单击某些按钮时显示结果。

    <div id="results">
      <?= $results;  ?>
    </div>

    <button id="start">Start!</button>

    <script>
       $(document).ready(function(){ 

          /* HIDE RESULTS */
          $('#results').hide();

          /* CLICK EVENT ON START BUTTON */
          $('#start').on('click', function(){ 
             $('#results').show(); 
          }); 
       });
    </script>

Answer 3

您可以使用GET参数将php代码放在条件语句中：

<div class="container text-center border border-primary rounded">
        <h1 class="container "> What are the Odds!?!</h1>
        <div class="col-sm">The game of definite uncertainty!</div>
        <?php

        if (isset($_GET['start'])) {
        $random = rand(1,2);
        $random2 = rand(1,2);
        ?>

        <div class="text-center">
        <div class="text-primary">Player1:<?php echo $random; ?></div><div class="text-danger">Player2:<?php echo $random2; ?></div>
        </div>
        <br>
        <div>
        <?php

        if($random ==1 && $random2 ==1){
            echo "Player 1 WINS!!!";
        }elseif($random ==2 && $random2 ==2){
            echo "Player 1 WINS!!!";
        }else{
            echo "Player 2 WINS!!!";
        }
        ?>
        </div>
        <?php } ?>
        <br>
        <button onclick="window.location=window.location+'?start=true';">Start!</button>
</div>

Answer 4

    Check this simple code in javascript just call a function on onclick button and 
   display your result.   



<div class="container text-center border border-primary rounded">
            <h1 class="container "> What are the Odds!?!</h1>
            <div class="col-sm">The game of definite uncertainty!</div>
            <?php

    $random = rand(1, 2);
    $random2 = rand(1, 2);
    ?>

            <div class="text-center">
            <div class="text-primary">Player1:<?php echo $random; ?></div><div class="text-danger">Player2:<?php echo $random2; ?></div>
            </div>
            <br>
            <div>
            <?php

    if ($random == 1 && $random2 == 1) {
        echo "<div id='resut' style='display:none'>Player 1 WINS!!!</div>";
    } elseif ($random == 2 && $random2 == 2) {
        echo "<div id='resut' style='display:none'>Player 1 WINS!!!</div>";
    } else {
        echo "<div id='resut' style='display:none'>Player 2 WINS!!!</div>";
    }
    ?>
            </div>
            <br>
            <button onclick="showResult()">Start!</button>
    </div>

    //javascript function
    <script>
    function showResult(){
    document.getElementById("resut").style.display = "block";
    }

    </script>

Answer 5

首先隐藏结果，然后在单击按钮时显示，请检查更新的代码。

 <div class="container text-center border border-primary rounded">
 <h1 class="container "> What are the Odds!?!</h1>
<div class="col-sm">The game of definite uncertainty!</div>
<?php
$random = rand(1, 2);
$random2 = rand(1, 2);
?>

<div class="text-center">
    <div class="text-primary">Player1:<?php echo $random; ?></div><div class="text-danger">Player2:<?php echo $random2; ?></div>
</div>
<br>
<div id="results">
    <?php
    if ($random == 1 && $random2 == 1) {
        echo "Player 1 WINS!!!";
    } elseif ($random == 2 && $random2 == 2) {
        echo "Player 1 WINS!!!";
    } else {
        echo "Player 2 WINS!!!";
    }
    ?>
</div>
<br>
<button>Start!</button>

和jQuery来显示/隐藏结果。

<script>
$(document).ready(function () {
    $('#results').hide();
    $('button').on('click', function () {
        $('#results').show();
    });
});
</script>

如何隐藏PHP回声，直到单击按钮？

5 个答案: