Change Content - Javascript

Change html element content using pure javascript author(s): Deepu Mohan Puthrote (WarFox)

HTML

<div id="myelement">Old Text</div><p class="hidden">
test 1
</p>
<p class="hidden">
Test 2
</p>
<p class="hidden">
Test 3
</p>

CSS

.hidden {
  display: none;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  let paragraphs = document.querySelectorAll("p.hidden");
  
  paragraphs.forEach(function(paragraph) {
    paragraph.textContent = 'Shown';
    paragraph.classList.remove('hidden');
    
    paragraph.style.opacity = 0;
    
    let lastTime = null;
    
    function fade(timestamp) {
      if (!lastTime) lastTime = timestamp;
      
      let elapsed = timestamp - lastTime;
      
      if (elapsed < 200) {
        requestAnimationFrame(fade);
        return;
      }
      
      lastTime = timestamp;
      let currentOpacity = parseFloat(paragraph.style.opacity);
      
      if (currentOpacity < 1) {
        paragraph.style.opacity = (currentOpacity + 0.1).toString();
        requestAnimationFrame(fade);
      }
    }
    
    requestAnimationFrame(fade);
  });
});