CSE 190 M: Web Programming, Spring 2011

Homework 5 (ASCIImation) FAQ

Q: I am stuck. Nothing works. Help me!

A: Try doing these things:

• W3C HTML/CSS validate your page first.
• Make sure Firebug doesn't say any red error message text at bottom-right. If you don't have Firebug, install Firebug and never web program ever again without Firebug. Ever.
• Put a JS alert at the top of your file and/or function and see if it shows up.
• Run your JS code through JSLint and fix all errors.
• Try the Firebug debugger and see if you can step through and find the bug.

Q: Why does it reload my page every time I click a button? (For example, it sets the text in the text area, then it clears it out right away and refreshes the page.)

A: Don't use a form tag on your page. If you do, it will treat any button click as an attempt to submit that form, which will refresh your page.

Q: Why doesn't it work whenever I try to set a style in JavaScript?

A: Don't forget to use a string with proper units, like "3em" or "20px". Try JSLint.

Q: Why doesn't the document.getElementByID function work?

A: One common bug is that the "D" in "ID" should be lowercase. It's document.getElementById.

Q: Why can't I get the text out of a textarea in my JS code?

A: Remember that it's stored as the value, not innerHTML, of the text area.

Q: Why doesn't my for loop for animation work?

A: Don't use a for loop to produce animation. Use a timer with the setInterval or setTimeout function.

Q: My animation is too fast/slow.

A: The spec says the number of frames per second you want to use. But setInterval takes a delay in milliseconds. You may need to convert one to the other.

Q: Why are all of my animation frames (except the first one) lowered down by 1 line?

A: Maybe you aren't using exactly the right delimiter to break apart the frames. Read the spec carefully.

Q: If the user starts, stops, and then starts the same animation again do you want the animation to begin where it left off before the user stopped it? Or should we begin the animation from the first frame?

A: It should start over.

Q: How do I examine or set the id or class properties of an HTML tag in JavaScript?

A: Look at the JS DOM object for the tag, and examine its .id or .className attributes respectively.

Q: How many global variables am I allowed to have?

A: A variable should only be global if you truly need its value across many functions (or many calls to a function), and if it can't be reasonably passed as a parameter, and if the value can't be discovered in some other reasonable way. For example, it is almost always bad form to store DOM objects (objects returned by $ and $$) in global variables, because you can easily access these objects again by calling $ or $$ again.

Q: Why doesn't this work? How can I pass a parameter to an onclick handler? $("mybutton").onclick = myFunction(42);

A: If you write () or parameters when attaching an event handler, it actually calls the handler right there, rather than attaching it to be called later. But if you want parameters, you can do one of the following instead:

1. $("mybutton").onclick = f;
   ...
   function f() {
   	myFunction(42);
   }
   

2. // anonymous function; may be bad style
   $("mybutton").onclick = function() {
   	myFunction(42);
   };