Home/ Questions/Q 8916763
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T05:19:31+00:00

Ive got two div’s on a webpage, which need to be hidden from page

  • 0

Ive got two div’s on a webpage, which need to be hidden from page load until the if statement in the script block dictates when the div is to be displayed..is this possible and how can it be done?
i have a jQuery linked but what i’ve tried doesnt work 

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        body {
            background-color: #3da9cd;
            background:url('background.jpg');
            height: 50%;
            width: 50%;
            margin:0;
            padding: 0;
            overflow:auto;
        }
        h1 {
            font-size: 34px;
            margin: 0;
            padding: 0;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-weight: bold;
            color: #000000;
        .hidden { display: none; }
        .shown {display:block;}
}
</style>
<script type="text/javascript">


function WinLose()
{
    $("#win").hide();
$("#lose").hide();
    var x=document.getElementById("demo");
    x=x.innerHTML=Math.floor((Math.random()*5)+1);

    if (x==5)
    {
        $('#win').show()

    }
    else 
    {
        $('#lose').show()
    }

}

</script>

</head>
<body>


<p id="demo"></p>

<button onclick="WinLose()">Try it</button>

<!-- Win element -->
        <div id="win" class="hidden">Congratulations! You have won a prize. *UNIQUE CODE* Collect your prize from the Customer Services desk</div>

        <!-- The losing image div -->
        <div id="lose" class="hidden">Sorry, you have not won. Better luck next time</div>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should set the visibility of the divs using css display property like so:

    .hidden { display: none; }

    and your divs like so:

    <div class="hidden">first div</div>
<div class="hidden">second div</div>

    and then with your, js either remove the hidden class or $.show().

    • 0