How do you make a blinking animation in Javascript?

Question

I'm trying to make some ascii art blink by alternating between "0" and "_" for eyes. I pasted the code I currently have below. The ascii person will simply be closing and then opening her eyes once every few seconds. I don't see why my code doesn't work and I'm open to using other ways too. Thanks!

<script type="text/javascript">
function startBlinking() {
   window.setInterval(blinking(),2000);
}

function blinking() {
    var left=document.getElementById("leftEye");
    var right=document.getElementbyId("rightEye");

    left.innerHTML="_";
    right.innerHTML="_";
    window.setTimeout(function(){
          left.innerHTML="0";
          right.innerHTML="0";
    },500);
}

startBlinking();
</script>

And here is the rest of the code!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Girl</title>
    <style type="text/css">
        pre {
            font-family: monospace;
            font-size: small;
    }

</style>

<script type="text/javascript">

function startBlinking() {
   window.setInterval(blinking(),2000);
}

function blinking() {
    var left=document.getElementById("leftEye");
    var right=document.getElementbyId("rightEye");

    left.innerHTML="_";
    right.innerHTML="_";
      window.setTimeout(function(){
          left.innerHTML="0";
          right.innerHTML="0";
      },500);
}

function buttonClicked() {
  var lines=new Array();
  lines=["You should not stay up so late...",
                   "Light roast coffee please.",
                   "Fire Emblem is so good.",
                   "How's the weather today?",
                   "I hope you studied for finals.",
                   "What else should I say?",
                   "No more ramen for dinner.",
                   "Placement text",
                   "Placement text",
                   "Placement text"];

  var ran=Math.floor(Math.random()*10);
  var parsedStr=parse(lines[ran]);
  document.getElementById("text1").innerHTML=parsedStr[0];
  document.getElementById("text2").innerHTML=parsedStr[1];
  document.getElementById("text3").innerHTML=parsedStr[2];
}

function parse(str){
  var length=str.length;
  var strArray= new Array();
  strArray=["           ","           ","           "];

  if(length > 33) {
     return parse("Too many characters!");
  } else {
     if(length<11) {
         var spaces="";
         for(var i=0; i<(11-length);i++) {
            spaces+= " ";
         }
         strArray[0]=str.slice(0,length)+spaces;
     } else if(length>11 && length <22) {
         var spaces="";
         for(var i=0; i<(22-length);i++) {
            spaces+= " ";
         }
         strArray[0]=str.slice(0,11);
         strArray[1]=str.slice(11,length)+spaces;
     } else {
         var spaces="";
         for(var i=0; i<(33-length);i++) {
            spaces+= " ";
         }
         strArray[0]=str.slice(0,11);
         strArray[1]=str.slice(11,22);
         strArray[2]=str.slice(22,length)+spaces;
     }

     return strArray;
  } 
   }

   startBlinking();
   </script>
</head>
<body>
    <pre>
     _____        ,--------------,
    /////\\       |  <span id="text1">You should </span> |
   ///////\\      |  <span id="text2">not stay up</span> |
   \|<span id="leftEye">0</span> <span id="rightEye">0</span> \\\\     |  <span id="text3">so late... </span> |
   ||    /|||    &lt;,______________|
   //\^_,|\\\
  ||+--| |--_|
  |/  `-_-'  \
  /\/|  V   \_\
 / /\| __   |\ \
/ /  ||_ |) | \ \
\ \  ||\\|__|__\ \
 \ \ | \_________/
  \ \|      |
</pre>
<p><button type="button" id="talkButton" onclick="buttonClicked()">Talk</button></p>
</body>
</html>

Can you post the HTML that goes with this? – Jun 18 '13 at 22:39 — , Jun 18 '13 at 22:39

bfavaretto · Answer 1 · 2013-06-18T22:52:52.197

2

You're passing undefined to setInterval (because that's the return value of blinking). Pass a function reference instead:

function startBlinking() {
   window.setInterval(blinking, 2000);
   //no parentheses here -----^
}

Also, fix this typo: getElementbyId should be getElementById (JavaScript is case-sensitive). And always check your browser's error console, you would have caught this one.

After you fix both issues, it appears to work: http://jsbin.com/ikubaz/1/edit

edited Jun 18 '13 at 22:52

answered Jun 18 '13 at 22:46

bfavaretto

71,580
16
111
150

What do you mean pass a function reference? As in pass in blinking()? And I'll see if I keep setTimeout or not after I get it to work. – Aeris Jun 18 '13 at 22:52
2

Don't use the parentheses after `blinking` when passing it. Otherwise you're invoking the function immediately and passing its return value. You want to pass the function itself. – bfavaretto Jun 18 '13 at 22:53
Oh, awesome! Thanks a lot! Is there a validator/debugger to find these issues? – Aeris Jun 18 '13 at 23:03
I'm not sure if jslint.com would catch this, but it's worth a try. – bfavaretto Jun 18 '13 at 23:07

How do you make a blinking animation in Javascript?

1 Answers1