Jane Doe Jane Doe - 1 month ago 7
Javascript Question

How to Fade In a notification by clicking a text field

Hi guys I need help (again). I wanted to learn how to make the notification or alert box fade-in and fade-out after clicking a editable textbox.

This is the code for the alert box:

<div class="alert alert-warning fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close" style="text-decoration:none">&times;</a>
Alert: Please don't do this.
</div>


and this is the script for onClick:

function clicks() {
document.getElementById("notif").innerHTML = "Hello World";
}
</script>


I was thinking I will put the
div alert box
inside a
condition
or just a script with onClick function

Answer

Working example on CodePen: http://codepen.io/oculusriff/pen/aBoKvE

HTML

<div id="alert" class="alert alert-warning fade">
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    Alert: Please don't do this.
</div>

<textarea id="txt"></textarea>

JS

var textarea = document.getElementById('txt');
var alert = document.getElementById('alert');

txt.addEventListener('focus', function() {
  alert.classList.add('in');

  setTimeout(function() {
    alert.classList.remove('in');
  }, 2000);
});

txt.addEventListener('blur',function (){
  alert.classList.remove('in')
});