Scribd
Upload
25 views

Js Dom Challenges

Uploaded by

nilayesh.bhattacharya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views

Js Dom Challenges

Uploaded by

nilayesh.bhattacharya
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

JavaScript DOM

Challenges
17 - 21
Challenge 17
For each of these challenges, use the start file
and add <script> tags at the bottom of the
page, just before the closing </body> tag, and
put your JavaScript between those tags.

Save each challenge as challenge17.html, etc.

For this challenge, write a script that gets the


text inside the paragraph with the id set to
"copyright" and use the color property to
change the color of the text to green.
Challenge 17 Answer
You should get something similar to this:
Challenge 18
For this challenge, get all the paragraphs on
the page, assign them to a variable, then use
that variable in a loop to set the style.color
property to green.

Try to do this without looking at the answer


on the next slide!
Challenge 18 Answer
You could either use a for
loop, or the for .. of loop to do
this.
Challenge 19
For this challenge, assign the class of .red
(which is already defined inside the style tags
at the top of the page) to the <h1> in the
header and to the date in the second article.
Challenge 19 Answer
There are a few ways to do this, but this is
what I came up with...
Challenge 20
For this challenge, change the src attribute for
the first picture in the first article to:
"http://meadpoint.net/images/xmasajax.jpg"

Also add the class "blue" to all the paragraphs


in the second article.
Challenge 20 Answer
There are a few ways to do this, but here is one solution.
Challenge 21
For this challenge, get all the links, then check
to see if one of them is set to go to the
wikipedia page on llamas, if it is, set the text
of that link to "Llamas are cool!"

Do you need a hint? Look at the next slide...


Challenge 21 hint
Use these document methods and properties:

.getElementsByTagName();

.getAttribute();

.innerHTML = "";

You will have multiple anchor tags to check


and you're looking to see if one of them
matches, so that should tell you what logical
flow control structures you need.
Challenge 21 Answer
Hopefully, you came up with something
similar to this:

You might also like