How to hide a PHP echo until a button is clicked?

Question

I want to display the results of a game that is played when a button is clicked, but I only want them to show once the button is clicked, and not before, when the page is first loaded.

<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>

Duplicate by https://stackoverflow.com/questions/23761478/js-using-onclick-event-on-li-to-display-block — Richard, Jun 17 '19 at 05:17
Possible duplicate of [How can I prevent SQL injection in PHP?](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) — Yushin, Jun 17 '19 at 05:24

score 0 · Answer 1 · answered Jun 17 '19 at 05:19

Hide the container first using

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

in button onclick you should call a new new.

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

and on the script we create a function

<script>

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

</script>

Yona Smilevitch · Answer 2 · 2019-06-17T07:38:37.107

Put results (php) in a div, then hide the div with js. And attach an event on this div to display results when you click on some button.

    <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>

score 0 · Answer 3 · answered Jun 17 '19 at 05:29

You could put the php codes inside a conditional statement by using a GET parameter :

<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>

score 0 · Answer 4 · answered Jun 17 '19 at 05:33

    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>

score 0 · Answer 5 · answered Jun 17 '19 at 05:42

First hide your results and then show on click of button, Please check your updated code.

 <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>

And jquery to show/hide results.

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

How to hide a PHP echo until a button is clicked?

5 Answers5