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?

user1864610
– user1864610

2013-06-18 22:39:55 +00:00
Commented Jun 18, 2013 at 22:39 — user1864610
– user1864610, Commented Jun 18, 2013 at 22:39

bfavaretto · Accepted Answer · 2013-06-18 22:52:52Z

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, 2013 at 22:52

answered Jun 18, 2013 at 22:46

bfavaretto

72k18 gold badges118 silver badges162 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Aeris Over a year ago

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.

bfavaretto Over a year ago

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.

Aeris Over a year ago

Oh, awesome! Thanks a lot! Is there a validator/debugger to find these issues?

bfavaretto Over a year ago

I'm not sure if jslint.com would catch this, but it's worth a try.

Collectives™ on Stack Overflow

How do you make a blinking animation in Javascript?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related