Хотим показать при клике на ссылку с классом "next" скрытый спан элемент с классом "invisible" (спан скрыт в атрибуте style спана).
<!DOCTYPE html>
<html>
  
<head>
        <meta charset="utf-8">
    <link href="style2.css" rel="stylesheet">
  </head>
  <body>
        <div class="film"><h1>Побег из Шоушенка</h1><img alt="" src="http://st.kp.yandex.net/images/film_iphone/iphone360_326.jpg" class="poster">
        <p>Успешный банкир Энди Дюфрейн обвинен в убийстве собственной жены и ее любовника. Оказавшись в тюрьме под названием Шоушенк, он сталкивается с жестокостью и беззаконием,
        <a href="" class ="next dn">Дальше </a>
        <span class="invisible" style="display: none">царящими по обе стороны решетки. Каждый, кто попадает в эти стены, становится их рабом до конца жизни. Но Энди, вооруженный живым умом и доброй душой, отказывается мириться с приговором судьбы и начинает разрабатывать невероятно дерзкий план своего освобождения.</span></p>
        </div>
        
var next = document.querySelector('.next');
      var inv = document.querySelector('.invisible');
      function vis () {
        inv.style.display = "inline";
      }
      next.onclick = vis;
  
</body>
</html>
Почему спан элемент по клику показывается и через секунду исчезает?
Как лучше это реализовать?