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.