Run Javascript only after div is 'shown', display:block

user_12675531 0
Viewed 505

I am using this JavaScript function to toggle between divs:

 function show(shown, hidden) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  return false;
}

I and trying a little text animation, but the problem is that the text animation is supposed to start when I get to page 2 from page 1. However the text animation from javascript runs as soon as i load the page and I am still on page 1.

here is the full html page:

    <!DOCTYPE html>
<html>
<head>
<script>
function show(shown, hidden) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  return false;
}
</script>
</head>
<body>

  <div id="Page1">
    Content of page 1
    <a href="#" onclick="return show('Page2','Page1');">Show page 2</a>
  </div>

  <div id="Page2" style="display:none">
  <div id="typedtext"></div>
    <script>
  var aText = new Array(
"hey man",
"how are you",
"how is it going"
);
var iSpeed = 100; // time delay of print out
var iIndex = 0; // start printing array at this posision
var iArrLength = aText[0].length; // the length of the text array
var iScrollAt = 20; // start scrolling up at this many lines
 
var iTextPos = 0; // initialise text position
var sContents = ''; // initialise contents variable
var iRow; // initialise current row
 
function typewriter()
{
 sContents =  ' ';
 iRow = Math.max(0, iIndex-iScrollAt);
 var destination = document.getElementById("typedtext");
 
 while ( iRow < iIndex ) {
  sContents += aText[iRow++] + '<br />';
 }
 destination.innerHTML = sContents + aText[iIndex].substring(0, iTextPos) + "_";
 if ( iTextPos++ == iArrLength ) {
  iTextPos = 0;
  iIndex++;
  if ( iIndex != aText.length ) {
   iArrLength = aText[iIndex].length;
   setTimeout("typewriter()", 500);
  }
 } else {
  setTimeout("typewriter()", iSpeed);
 }
}
window.onload = typewriter();

</script>

    <a href="#" onclick="return show('Page1','Page2');">Show page 1</a>
  </div>
  


</body>
</html>

How can i make it so that the javascript function starts running only after i show the page 2 div after i have clicked to go to page 2?

html javascript
4 Answers

You should only execute the typewriter function if the element to be shown has an id of "Page2".

function show(shown, hidden) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  if(shown === 'Page2'){
    typewriter();
  }
  return false;
}

Live Example:

<!DOCTYPE html>
<html>

<head>
  <script>
    function show(shown, hidden) {
      document.getElementById(shown).style.display = 'block';
      document.getElementById(hidden).style.display = 'none';
      if (shown === 'Page2') {
        typewriter();
      }
      return false;
    }
  </script>
</head>

<body>

  <div id="Page1">
    Content of page 1
    <a href="#" onclick="return show('Page2','Page1');">Show page 2</a>
  </div>

  <div id="Page2" style="display:none">
    <div id="typedtext"></div>
    <script>
      var aText = new Array(
        "hey man",
        "how are you",
        "how is it going"
      );
      var iSpeed = 100; // time delay of print out
      var iIndex = 0; // start printing array at this posision
      var iArrLength = aText[0].length; // the length of the text array
      var iScrollAt = 20; // start scrolling up at this many lines

      var iTextPos = 0; // initialise text position
      var sContents = ''; // initialise contents variable
      var iRow; // initialise current row

      function typewriter() {
        sContents = ' ';
        iRow = Math.max(0, iIndex - iScrollAt);
        var destination = document.getElementById("typedtext");

        while (iRow < iIndex) {
          sContents += aText[iRow++] + '<br />';
        }
        destination.innerHTML = sContents + aText[iIndex].substring(0, iTextPos) + "_";
        if (iTextPos++ == iArrLength) {
          iTextPos = 0;
          iIndex++;
          if (iIndex != aText.length) {
            iArrLength = aText[iIndex].length;
            setTimeout("typewriter()", 500);
          }
        } else {
          setTimeout("typewriter()", iSpeed);
        }
      }
    </script>

    <a href="#" onclick="return show('Page1','Page2');">Show page 1</a>
  </div>



</body>

</html>

user_95131840

so fixed - and tested in codepen.

problem was the window.load part - it calls as soon as the WINDOW loads... not page2, since page2 is just a div turning on and off, it's not a new page.

the addEventListener just tends to be clearer and cleaner to write in - and it is a better point to combine function outputs - the onClick="" is meh - addEventListener is where it's at.

attaching a event handler -housing an annon function containing special logic for page2 is what you are after it looks like. code is below.

<html>
<body>
  <div id="Page1"> Content of page 1
    <a href="#" id="link1">Show page 2</a>
  </div>
  <div id="Page2" style="display:none">
  <div id="typedtext"></div>
    <a href="#" id="link2">Show page 1</a>
  </div>
</body>
</html>


function show(shown, hidden) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  return false;
}
const link1=document.getElementById("link1");
const link2=document.getElementById("link2");
  link1.addEventListener("click", function(){
    show('Page2','Page1');
    typewriter();
  });
link2.addEventListener("click", function(){
    show('Page1','Page2');
  });
 var aText = new Array(
"hey man",
"how are you",
"how is it going"
);
var iSpeed = 1000; // time delay of print out
var iIndex = 0; // start printing array at this posision
var iArrLength = aText[0].length; // the length of the text array
var iScrollAt = 20; // start scrolling up at this many lines
 
var iTextPos = 0; // initialise text position
var sContents = ''; // initialise contents variable
var iRow; // initialise current row
 
function typewriter()
{
 console.log("typing"); 
 sContents =  ' ';
 iRow = Math.max(0, iIndex-iScrollAt);
 var destination = document.getElementById("typedtext");
 
 while ( iRow < iIndex ) {
  sContents += aText[iRow++] + '<br />';
 }
 destination.innerHTML = sContents + aText[iIndex].substring(0, iTextPos) + "_";
 if ( iTextPos++ == iArrLength ) {
  iTextPos = 0;
  iIndex++;
  if ( iIndex != aText.length ) {
   iArrLength = aText[iIndex].length;
   setTimeout("typewriter()", 500);
  }
 } else {
  setTimeout("typewriter()", iSpeed);
 }
}
user_117565290

instead of onclick="return show('Page2','Page1');"
use onclick="function() {return show('Page2','Page1')}"

user_65901940

Simply delete the window.onload part and put typewriter() right before return false in your show function

user_20168310
Related