To make div appear is to disappear after a while

Asked

Viewed 38 times

-2

I have a code that generates a random number is to appear in div = value, right away. But I wanted this div to become invisible and after I click on the button it appears speak the value and disappear soon after. Does anyone know how to create it?

<html>

<body bgcolor="black"></body>

<script>

    function rollDice() {
    var roll = Math.floor(Math.random() * 20) + 1;
    valor.innerHTML = roll;
    }

</script>

<input type="button" value="Click" id="clickbutton" onclick="rollDice()">

<div id="valor" class="dice">00</div>

<style>

@import url('http://fonts.cdnfonts.com/css/cmu-typewriter-text');

#valor {
        font-family:'CMU Typewriter Text', sans-serif;
        font-size: 60px;
        border: none;
        border-bottom:1px solid Grey;
        color: White;
        position: absolute;
        top: 1%;
        left: 1%;

    }

#clickbutton {
    position: absolute;
    top: 7%;
    left: 7%;
}
</style>
</html>
javascript html css

1 answer

0

Hello, you can use the setTimeout() of javascript even within its function rollDice() with a time of 3 seconds would show, right after you would remove with css div, if I wasn’t very clear it’s just talk, I hope it helps. The example would look like this:

function rollDice() {
      var contentdiv = document.getElementById('valor');
      // seu código... Math.floor(Math.random() * 20) + 1;
      
      setTimeout(() => {
         contentdiv.style.display = 'none';
      },3000);
   }

  • but there’s still a problem, when the value goes away it goes forever, when clicka again in the input the value doesn’t seem anymore, has how to solve?

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.