JavaScript Simplified / Chapter 66 Exercises

  • Index of exercises
  • Email me

1

2

3

4

5

6

7

8

9

10

Congratulations. You've aced all the exercises for this chapter.


To practice on your own, or to check code you believe shouldn't have been scored as incorrect, go to CodePen.


Are you ready to rate JavaScript Simplified? on Amazon?


Rate it on Amazon.

0,1,2,3,4,5,6,7,8,9

0

0

0

0

The querySelector method uses standard ____ selectors. CSS CSS
The statement targets the element with an id of "p1". Fill in the blank. let firstParagraph = document.querySelector_____; ("#p1") \(•#p1•\)
The statement targets the h1 heading. Fill in the blank. let bigHeading = _________________("h1"); document.querySelector document\.querySelector
The statement targets an element with an id of "mainDiv". Fill in the blank. let main = ______________________________; document.querySelector("#mainDiv") document\.querySelector\(•#mainDiv•\)
Assign the element with a particular id to a variable. Make up the id and the variable name. let whatever = document.querySelector("#address-field"); let[a-z_$][a-zA-Z0-9_$]*=document\.querySelector\(•#.*•\);
A button has been assigned to the variable btn. Using an arrow function, display an alert when the button is clicked. Make up the alert message. btn.addEventListener("click", () => {
  alert("hi");
});		 btn\.addEventListener\(•click•,\(\)=>{[\r\n]?alert\(•.*•\);[\r\n]?}\);
When the h1 heading is clicked, the variable headingClicked is assigned true. Fill in the blank. _______________________.addEventListener("click", () => {
  headingClicked = true;
});		 document.querySelector("h1") document\.querySelector\(•h1•\)
When the element with an id of "heading-3" is moused over, use an arrow function to assign an integer to a variable that has already been declared. Make up the integer and the variable name. document.querySelector("#heading-3").addEventListener("mouseover", () => {
  x = 0;
});		 document\.querySelector\(•#heading-3•\)\.addEventListener\(•mouseover•,\(\)=>{[\r\n]?[a-z_$][a-zA-Z0-9_$]*=(0|-?[1-9][\d]*);[\r\n]?}\);
  1. I've coded some HTML markup. Click the HTML button to see it. Notice that the second paragraph has an id of "p2"
  2. Click the JS button.
  3. Code this: When the paragraph with an id of "p2" is clicked, display an alert. Use an arrow function.
  4. When you've completed your code, click the Result button. The three paragraphs display.
  5. Click the second paragraph
  6. Wait a moment.
  7. If you've coded correctly, the alert will display.
  8. Dismiss the alert by clicking OK.
  9. For help with this code, see Chapter 66 in the book.
  1. I've coded an unordered list. Click the HTML button to see it.
  2. I've coded a function that turns the list purple. Click the JS button to see it.
  3. Under my code, select the list and assign it to the variable lorisList. Then code an event listener that calls my function when the list is moused over.
  4. After completing your code, click the Result button.
  5. Click the list.
  6. If you've coded correctly, the list will turn purple.
  7. For help with this code, see Chapter 66 in the book.