Errata

fadeIn(1000) has no visible effect and is not consistent with the exercise goal. fadeToggle(1000) gets the job done.

Within the function definition of the var hideCode, another function definition that is to run for each DOM member of class .guess_box is given a second parameter of "value". However, "value" is not used anywhere in that function definition, and removing that parameter appears to have no effect on the execution.

The answer states that value is the same as $(this) (i.e. a jQuery object) in the .each loop, but it is the same as this (i.e. a DOM element object).

In the "look up close"
for the
"for( var i=0 ; i < my_arr2.length ; i++ ){" example,
there is infobubble
".length is a common
method for all arrays.
It tells you how many
items the array has."

length is property, not method.

two identical card can be dealt and calling 'used_cards' at the console gives a reference error.

When you add the new controls, you have a btnDeal and you add a btnHit and btnStick. But then in the corresponding new CSS, you show btnHit, btnStick, and btnRestart.

I think you add btnRestart later in the chapter, and I think btnDeal doesn't need this CSS, but it's still very confusing that these "corresponding" code parts don't match.

The example shows three tests of current_total in this order:

#1: if (this.current_total > 21)

#2: if (this.current_total == 21)

#3 if (this.current_total <= 21 && this.cards.length == 5)

If current_total is 21 on your fifth card, you not reach the 3rd test as intended. A better solution is to reverse the order of #2 and #3:

After checking whether the variable "good_card" is still false, you first set it to false. This makes no sense at all and beginners will be quite confused to see this.

It doesn't make sense to allow adding cards after the game is over. $("#btnHit").unbind() should be added to the three end-of-game conditions in sumCardTotal.

1) index.html
Before: src is blank
<div id="result"><img src="" id="imgResult"></div>

After: add path to image
<div id="result"><img src="images/check.png" id="imgResult"></div>

2) my_scripts.js
Before: # is missing
$("result").toggle();

After: add # in front of 'result'
$("#result").toggle();

There is no code (at this point) to toggle on btnRestart so there is nothing to click on.

When opening the page in Chrome, each line reporting a blur or focus is printed twice. This error also causes problems with the Monster Mash lightning solution in Chapter 7.

The error occurs due to the way in which Chrome processes onblur and onfocus events. When a window loses focus, it fires two onblur events; similarly, onfocus is triggered twice each time a page gains focus.

To correct this for onblur, a flag variable can be declared and initialized to false. When the event handler for onblur is triggered, if the flag is set to false, the function is executed and the flag is set to true. Otherwise, it does nothing. Then, the event handler for onfocus can set the flag to false again.

The solution is similar for onfocus.

The code is not behaving as expected.

The line `goLightning();` causes the lightning effect to start immediately upon page load. However, when clicking on the page, the statement `window.onfocus = goLightning;` is triggered, resulting in the animation from two running functions.

Removing the line `goLightning();` doesn't help because we want the lightning effect to appear immediately after the page loads. Additionally, removing the line doesn't solve the problem in Safari. If we open a new tab and switch back to the window with our program, the `goLightning()` function is called twice in a row, causing the inability to cancel the lightning effect with the `stopLightning()` function.

My solution to this problem is to create a flag variable that tracks whether the `goLightning()` function is currently running. Here's the implementation:

/* Start of the code */
var isLightningRunning = false; // Create a flag variable and initialize it to false

function goLightning() {
if (!isLightningRunning) { // Check the flag value before executing the function body
int1 = setInterval(lightning_one, 4000);
int2 = setInterval(lightning_two, 5000);
int3 = setInterval(lightning_three, 7000);
isLightningRunning = true; // Update the flag value at the end
}
}

function stopLightning() {
clearInterval(int1);
clearInterval(int2);
clearInterval(int3);
isLightningRunning = false; // Update the flag value
}
/* End of the code */

By introducing the `isLightningRunning` flag, we can control the execution of the `goLightning()` function and prevent it from being called multiple times or conflicting with the `stopLightning()` function.

I could not get this code to run unless I included a check for the existence of the $_POST value in the first "if()". I changed this:

if($_POST['action'] == 'addRunner') { // doesn't exist on GETs

to this:

if(isset($_POST['action']) && ($_POST['action'] == 'addRunner')) {

In the sightings_end.html code, the name of the first input field should be "creature_color_rgb".

Line 58 of service.php: array key weight is unquoted.
weight => $row['creature_weight'],

should be
'weight' => $row['creature_weight'],