Skip to main content
Modificada la animación y eliminado el uso de div innecesario
Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64

No es necesario utilizar Javascript para esto, intenta con el siguiente código:

var btn = document.getElementById("p-btn");
btn.addEventListener("click", function(evente){
  var=> ctn{
 = document.getElementById("precacucionCtn""precaucion");
  ctn.classNamestyle.display = "";"block";
});
#p-btn {
  background: rgba(204,0,51,0.4);
  padding: 5px;
  width: 70px;
  box-shadow: -2px 2px 3px #ac0033;
  color: white;
 }
#p-btn:active {
  box-shadow: -1px 1px 1px #890033;
  color: rgba(255,255,255,0.5);
} 

#precaucion {
  text-transform: capitalize;  
  background: red;
  animation: fadealerta 1.5s infinitelinear 100ms;
}
100ms infinite;
.invisible { opacity: 0;
  display: none;
}

@-webkit-keyframes fadealerta {
    from {opacity: 0;}
    25% {opacity: 1;}
    75% {opacity: 1;}
    to {opacity: 0;}
} 

@keyframes fadealerta {
    from {opacity: 0;}
    25% {opacity: 1;}
    75% {opacity: 1;}
    to {opacity: 0;}
}
<p id="p-btn">clickbtn">Pulse here<aquí</p>
<div class="invisible" id="precacucionCtn">
<p id="precaucion">! tenga precaucionid="precaucion">¡Tenga ¡<precaución!</p>

Básicamente eché mano de las transiciones CSS. A fin de que el aviso de precaución no se vea todo el tiempo lo puse en un contenedor y éste es el que muestro con Javascript.

No es necesario utilizar Javascript para esto, intenta con el siguiente código:

var btn = document.getElementById("p-btn");
btn.addEventListener("click", function(event){
  var ctn = document.getElementById("precacucionCtn");
  ctn.className = "";
});
#p-btn {
  background: rgba(204,0,51,0.4);
  padding: 5px;
  width: 70px;
  box-shadow: -2px 2px 3px #ac0033;
  color: white;
 }
#p-btn:active {
  box-shadow: -1px 1px 1px #890033;
  color: rgba(255,255,255,0.5);
}
#precaucion {
  text-transform: capitalize;  
  background: red;
  animation: fade 1.5s infinite 100ms;
}

.invisible {
  display: none;
}

@-webkit-keyframes fade {
    from {opacity: 1;}
    to {opacity: 0;}
} 

@keyframes fade {
    from {opacity: 1;}
    to {opacity: 0;}
}
<p id="p-btn">click here</p>
<div class="invisible" id="precacucionCtn">
<p id="precaucion">! tenga precaucion ¡</p>

Básicamente eché mano de las transiciones CSS. A fin de que el aviso de precaución no se vea todo el tiempo lo puse en un contenedor y éste es el que muestro con Javascript.

No es necesario utilizar Javascript para esto, intenta con el siguiente código:

document.getElementById("p-btn").addEventListener("click", (e) => {
  document.getElementById("precaucion").style.display = "block";
});
#p-btn {
  background: rgba(204,0,51,0.4);
  padding: 5px;
  width: 70px;
  box-shadow: -2px 2px 3px #ac0033;
  color: white;
 }
#p-btn:active {
  box-shadow: -1px 1px 1px #890033;
  color: rgba(255,255,255,0.5);
} 

#precaucion {
  text-transform: capitalize;  
  background: red;
  animation: alerta 1.5s linear 100ms infinite;
  opacity: 0;
  display: none;
}

@-webkit-keyframes alerta {
    from {opacity: 0;}
    25% {opacity: 1;}
    75% {opacity: 1;}
    to {opacity: 0;}
} 

@keyframes alerta {
    from {opacity: 0;}
    25% {opacity: 1;}
    75% {opacity: 1;}
    to {opacity: 0;}
}
<p id="p-btn">Pulse aquí</p>
<p id="precaucion">¡Tenga precaución!</p>

Básicamente eché mano de las transiciones CSS.

Mejoras menores
Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64

No es necesario utilizar JavascriptparaJavascript para esto, intenta con el siguiente código:

var btn = document.getElementById("p-btn");
btn.addEventListener("click", function(event){
  var ctn = document.getElementById("precacucionCtn");
  ctn.className = "";
});
#p-btn {
  background: rgba(204,0,51,0.4);
  padding: 5px;
  width: 70px;
  box-shadow: -2px 2px 3px #ac0033;
  color: white;
 }
#p-btn:active {
  box-shadow: -1px 1px 1px #890033;
  color: rgba(255,255,255,0.5);
}
#precaucion {
  text-transform: capitalize;  
  background: red;
  animation: fade 1.5s infinite 100ms;
}

.invisible {
  display: none;
}

@-webkit-keyframes fade {
    from {opacity: 1;}
    to {opacity: 0;}
} 

@keyframes fade {
    from {opacity: 1;}
    to {opacity: 0;}
}
<html>
<head>
    <title>ejercicioConJs</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>
        <p id="p-btn">click here</p>
        <div class="invisible" id="precacucionCtn">
          <p id="precaucion">! tenga precaucion ¡</p>
        </div>
    </div>  
</body>

Básicamente eché mano de las transiciones csstransiciones CSS. A fin de que el aviso de precaución no se vea todo el tiempo, lo puse en un contenedor y esteéste es el que muestro con javascriptJavascript.

No es necesario utilizar Javascriptpara esto, intenta con el siguiente código:

var btn = document.getElementById("p-btn");
btn.addEventListener("click", function(event){
  var ctn = document.getElementById("precacucionCtn");
  ctn.className = "";
});
#p-btn{
  background:rgba(204,0,51,0.4);
  padding: 5px;
  width: 70px;
  box-shadow: -2px 2px 3px #ac0033;
  color: white;
 }
#p-btn:active{
  box-shadow: -1px 1px 1px #890033;
  color: rgba(255,255,255,0.5);
}
#precaucion{
  text-transform: capitalize;  
  background: red;
  animation: fade 1.5s infinite 100ms;
}

.invisible{
  display:none;
}

@-webkit-keyframes fade {
    from {opacity: 1;}
    to {opacity: 0;}
} 

@keyframes fade {
    from {opacity: 1;}
    to {opacity: 0;}
}
<html>
<head>
    <title>ejercicioConJs</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>
        <p id="p-btn">click here</p>
        <div class="invisible" id="precacucionCtn">
          <p id="precaucion">! tenga precaucion ¡</p>
        </div>
    </div>  
</body>

Básicamente eché mano de las transiciones css. A fin de que el aviso de precaución no se vea todo el tiempo, lo puse en un contenedor y este es el que muestro con javascript.

No es necesario utilizar Javascript para esto, intenta con el siguiente código:

var btn = document.getElementById("p-btn");
btn.addEventListener("click", function(event){
  var ctn = document.getElementById("precacucionCtn");
  ctn.className = "";
});
#p-btn {
  background: rgba(204,0,51,0.4);
  padding: 5px;
  width: 70px;
  box-shadow: -2px 2px 3px #ac0033;
  color: white;
 }
#p-btn:active {
  box-shadow: -1px 1px 1px #890033;
  color: rgba(255,255,255,0.5);
}
#precaucion {
  text-transform: capitalize;  
  background: red;
  animation: fade 1.5s infinite 100ms;
}

.invisible {
  display: none;
}

@-webkit-keyframes fade {
    from {opacity: 1;}
    to {opacity: 0;}
} 

@keyframes fade {
    from {opacity: 1;}
    to {opacity: 0;}
}
<p id="p-btn">click here</p>
<div class="invisible" id="precacucionCtn">
<p id="precaucion">! tenga precaucion ¡</p>

Básicamente eché mano de las transiciones CSS. A fin de que el aviso de precaución no se vea todo el tiempo lo puse en un contenedor y éste es el que muestro con Javascript.

Origen Enlace
Camilo Bernal
  • 1.4k
  • 10
  • 23

No es necesario utilizar Javascriptpara esto, intenta con el siguiente código:

var btn = document.getElementById("p-btn");
btn.addEventListener("click", function(event){
  var ctn = document.getElementById("precacucionCtn");
  ctn.className = "";
});
#p-btn{
  background:rgba(204,0,51,0.4);
  padding: 5px;
  width: 70px;
  box-shadow: -2px 2px 3px #ac0033;
  color: white;
 }
#p-btn:active{
  box-shadow: -1px 1px 1px #890033;
  color: rgba(255,255,255,0.5);
}
#precaucion{
  text-transform: capitalize;  
  background: red;
  animation: fade 1.5s infinite 100ms;
}

.invisible{
  display:none;
}

@-webkit-keyframes fade {
    from {opacity: 1;}
    to {opacity: 0;}
} 

@keyframes fade {
    from {opacity: 1;}
    to {opacity: 0;}
}
<html>
<head>
    <title>ejercicioConJs</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>
        <p id="p-btn">click here</p>
        <div class="invisible" id="precacucionCtn">
          <p id="precaucion">! tenga precaucion ¡</p>
        </div>
    </div>  
</body>

Básicamente eché mano de las transiciones css. A fin de que el aviso de precaución no se vea todo el tiempo, lo puse en un contenedor y este es el que muestro con javascript.