Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript One Solution

Doron Geyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points
Posted by Doron Geyer
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points

Code for this particular exercise doesnt seem to update the webpage.

as mentioned my code doesnt seem to make any changes to the preview page. here's a snapshot of the actual code on my end. https://w.trhou.se/ws4lp50dq1

Doron Geyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points
Doron Geyer
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points

link to the exercise https://teamtreehouse.com/library/one-solution-8 snapshot of my workspace https://w.trhou.se/ws4lp50dq1

as mentioned nothing seems to update. 

// 1: Select the element with the ID 'about'. 
//    Store the element in the variable `about`.
const about = document.getElementById('about');
about.style.border = "2px solid firebrick";

// 2: Select all the <h2> elements in the document.
//    Set the color of the <h2> elements to a different color.
const h2;
h2 =document.getElementsByTagName("h2")
for(i=0;i <h2.length;i++){
  h2[i].style.color = "purple";
}

// 3: Select all elements with the class '.card'. 
//    Set their background color to the color of your choice.
const card= document.getElementsByClassName('.card');
for(i=0;i <card.length;i++){
  card[i].style.backgroundColor = "purple";
}
// 4: Select only the first <ul> in the document.
//    Assign it to a variable named `ul`.
const ul = document.querySelector("ul");
ul.style.border = "2px solid indigo";

// 5: Select only the second element with the class '.container'.
//    Assign it to a variable named `container`.
const container = getElementsByClassName ("container")[1];
container.style.backgroundColor = "royalblue";

// 6: Select all <a> elements that have a 'title' attribute. 
//    Set their color value to the color of your choice.
const titleLinks = document.querySelectorAll("a[title]");
for(i=0;i<titleLinks.length;i++){
  titleLinks[i].style.color = "green";
}
Doron Geyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points
Doron Geyer
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points

Steven Parker Hi there, I see you commented on one of my posts. Thanks again for taking the time to help out on the forums. I have created a separate question here and added a snapshot of my code. I have also tried adding the suggestions below by anthony amaro but the problem remains the same. I am seeing the same issue. I suspect whatever my issue is, is the same one faced by the other student.

3 Answers

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

There's no problem with the workspace updating, but the code has some errors keeping it from working:

On line 8, there's a "const" declaration with no assignment, but then an assignment on the next line. A "const" variable must be assigned when it is declared, and it cannot be assigned later. So do this instead:

const h2 = document.getElementsByTagName("h2");

Then on line 27 there's a call to "getElementsByClassName", but it should be "document.‍getElementsByClassName".

Fix those and the code will start working. And Anthony pointed out a few additional (but non-fatal) issues you may want to fix as well.

Doron Geyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points
Doron Geyer
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points

Thanks for the response, I wasn't aware that const had to be given an assignment immediately, glad to learn that. will correct and re-attempt it again.

anthony amaro
anthony amaro
8,686 Points
anthony amaro
anthony amaro
8,686 Points

hello doron i see a few things that may be causing the issue

const about = document.getElementById('about');
about.style.border = "2px solid firebrick";

const h2;
h2 =document.getElementsByTagName("h2")



for(i=0;i <h2.length;i++){ 
// here you forgot to declare your variabele for(let i = 0; i < h2.length; i++)
  h2[i].style.color = "purple";
}

// 3: Select all elements with the class '.card'. 


const card= document.getElementsByClassName('.card');    
     // you are getting the elementsByClassName you dont need the .  it should be ('card');

for(i=0;i <card.length;i++){
   // here the foorloop again
  card[i].style.backgroundColor = "purple";
}




const ul = document.querySelector("ul");
ul.style.border = "2px solid indigo";


const container = getElementsByClassName ("container")[1];
container.style.backgroundColor = "royalblue";

// 6: Select all <a> elements that have a 'title' attribute. 
//    Set their color value to the color of your choice.



const titleLinks = document.querySelectorAll("a[title]");
for(i=0;i<titleLinks.length;i++){  
    // same here with the loop above. (let i = 0; i < titleLinks.length; i++)
  titleLinks[i].style.color = "green";
}

i hope this helps

Doron Geyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points
Doron Geyer
.a{fill-rule:evenodd;}techdegree
Doron Geyer
Full Stack JavaScript Techdegree Student 13,897 Points

Hi anthony amaro , thanks for the response. I have implemented the changes you suggested to test out and see if it resolves the issue. Unfortunately no changes, the issue persists.

anthony amaro
anthony amaro
8,686 Points
anthony amaro
anthony amaro
8,686 Points

i see what the problem is. i actually open the project to see whats happening

const h2;
h2 =document.getElementsByTagName("h2")

// here just set const h2 = document.getElementsByTagName("h2");


const container = getElementsByClassName ("container")[1];
//here i actually didnt see that you missed ( document ) sorry about that
// const container = document.getElementsByClassName("container")[1];
container.style.backgroundColor = "royalblue";