Javascript 3秒钟后查看文本和警报框

我需要看到文本“示例”，并在3秒钟后同时发出成功警报。现在，只有文本工作，但警报框始终保持不变。我需要在代码中更改什么

HTML

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'), ' ');
  }
} 

这是一支工作笔：

我将

p.hid

更改为

.hid

，将id

#alert

添加到div

.alert

，并更改

var el=document.getElementById（'free'）

to

var el=document.getElementById（'alert'）

现在代码如下所示：

html

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

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'), ' ');
      }
    }

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

.hid {
  display: none;
}

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'), ' ');
      }
    }