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

Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

What I'm doing wrong here?

What I'm doing wrong here?

http://codepen.io/Aurelian/pen/WRrxVz

3 Answers

Kallil Belmonte
Kallil Belmonte
35,561 Points

Hi,

I made some changes and now it is working: http://codepen.io/anon/pen/pRgNyJ?editors=1010

  1. I added a "[0]" after the var button = document.getElementsByTagName("button");
  2. I switched places the two functions.
  3. And finally I called the buttonClick(); function.

And here is my version of the code: http://codepen.io/anon/pen/jyWVME

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

My second try was this

http://codepen.io/Aurelian/pen/ZLQeGP

Though, I like your doing, it's different than mine! Why did you use "parentNode" ?

So each time when someone want's to click, we need to write a function as well, right? that's how JS works.

ANd when we select tag name, or class , we need to specify which one, so the first one will be [0] yes? the second on e[1] etc.. and id will be just the text, as id is unique.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

An improvement you could make is use 'this' in JS I suppose, liek this

modalOverlay.addEventListener('click', function() {
  this.parentNode.removeChild(this);
});

because it makes life easier, right : p only one place to change it, if needed

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Ha!

Worked! Now when you click button needs to work.

But this is the code so far. 

var button = document.getElementsByTagName("button");

var body = document.getElementsByTagName("body");
var overlay = document.createElement("div");

document.body.appendChild(overlay);

this append to the body! YAY

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

So fat this doesn't work

function buttonClick() {
  button.onclick = showOverlay;
}

function showOverlay(event) {
  document.body.appendChild(overlay); // Append Overlay to body
}
Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

Hi, You can see the reason why I used parentNode in this page: http://www.w3schools.com/js/js_htmldom_nodes.asp at "Removing Existing HTML Elements" title.

Yes, when you use getElementsByTagName and getElementsByClassName you must say its position, [0] or [1] etc...

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

These documentations are hard to navigate : d Thank you! ANd I'm starting to understand more JS! :D