0

我正在尝试创建一个猜数字游戏：

<?php
    $num = rand(1,1000);
    $guess = $_POST["guess"];
?>

<div class="intro">We've generated a random number between 1 and 100. Give us your best guess!</div>

<form action="index.php" method="post">
    <input type="text" name="guess">
    <input type="submit" value="Guess!" onsubmit="showHide()">
</form>

<div class="guess-text">Your guess was <span class="guess-var"><?php echo $guess; ?></span></div>

<div class="echo" id="hidden_div>
<?php
    if ($guess > $random) {
    echo "Sorry, too high! Better luck next number!";
    }

elseif ($guess < $random) {
echo "Sorry, too low! Better luck next number!";
    }

else {
    echo "<script type='text/javascript'>location.href='/youwin.html'</script>";
}
?>
</div>

我想要显示结果的 div 

<div class="echo" id="hidden_div">

在提交表单之前隐藏。这是我能找到的唯一可以帮助我的代码：

<script type="text/javascript">
    function showHide() {
        var div = document.getElementById("hidden_div");
        if (div.style.display == 'none') {
            div.style.display = '';
        }

        else {
            div.style.display = 'none';
        }
    }
</script>

不幸的是，这只是隐藏了 div。我需要一些帮助以确保在提交猜测后 div 会重新出现。谢谢。

4

2 回答 2

1

您可以在不使用 Javascript 的情况下做到这一点，使其更清洁......

<?php if(isset($_POST["guess"]) && $_POST["guess"]!=""){ //only show if 'guess' is posted?>
 <div class="echo" id="hidden_div>

    if ($guess > $random) {
       echo "Sorry, too high! Better luck next number!";
    }

 elseif ($guess < $random) {
 echo "Sorry, too low! Better luck next number!";
    }

 else {
    echo "<script type='text/javascript'>location.href='/youwin.html'</script>";
 }
 ?>
 </div>
<?php } ?>

另一种选择是直接在 Javascript 中进行输出，因此您无需刷新页面即可获得答案。

于 2013-09-24T04:00:47.973 回答
1

最初将 div 设为隐藏

<div class="echo" id="hidden_div" style="display:none">
<?php
    if ($guess > $random) {
    echo "Sorry, too high! Better luck next number!";
    }

elseif ($guess < $random) {
echo "Sorry, too low! Better luck next number!";
    }

else {
    echo "<script type='text/javascript'>location.href='/youwin.html'</script>";
}
?>
</div>

点击按钮

<input type="submit" value="Guess!" id="btn" name="btn" onclick="showHide()">

<script type="text/javascript">
    function showHide() {
            document.getElementById("hidden_div").style.display = "block";
    }
</script>
于 2013-09-24T03:56:37.453 回答