CODEWITHSUNDEEP
javascripthtmlcss
storks
storks

Reputation: 429

View text and alert box after 3 seconds

I need to see text "Example" and alert success after 3 seconds in same time. Now only text work but alert box stands all time. What I need to change in this code?

HTML 

<div class="alert alert-success">  
<button class="close" data-dismiss="alert">×</button> 

<p id="free" class="hid">

Example

</p>  

</div>

CSS

p.hid {
  display: none;
}

JavaScript

setTimeout(function() {
  var el = document.getElementById('free');

  removeClass(el, 'hid');
}, 3000);

function removeClass(el, className) {
  if (el.classList) {
    el.classList.remove(className);
  } else {
    el.className = el.className.replace(new RegExp('(^|\\b)' +
        className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
  }
}

CodePen

Upvotes: 1

Views: 193

Answers (1)

Akul Von Itram
Akul Von Itram

Reputation: 1534

Here is a working pen: http://codepen.io/anon/pen/GJzzGz

I change p.hid to .hid, add id #alert to div .alert, and change var el = document.getElementById('free'); to var el = document.getElementById('alert');

Now code look like this:

html

<div id="alert" class="alert alert-success hid">  
  <button class="close" data-dismiss="alert">×</button> 
  <p id="free">Example</p>
</div>

css

.hid {
  display: none;
}

javascript

setTimeout(function() {
  var el = document.getElementById('alert');

  removeClass(el, 'hid');
}, 3000);

    function removeClass(el, className) {
      if (el.classList) {
        el.classList.remove(className);
      } else {
        el.className = el.className.replace(new RegExp('(^|\\b)' +
            className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
      }
    }

Upvotes: 2

Related Questions