I'm trying to create a number guessing game:
<?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>
I want the div that displays the result
<div class="echo" id="hidden_div">
to be hidden until after the form is submitted. Here is the only code I've been able to find that helps me out:
<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>
Unfortunately, this is only hiding the div. I need some help to ensure that the div will reappear after a guess is submitted. Thanks.